{"id":8556,"date":"2021-07-21T15:37:19","date_gmt":"2021-07-21T07:37:19","guid":{"rendered":"https:\/\/sdeno.com\/?p=8556"},"modified":"2021-07-22T11:19:54","modified_gmt":"2021-07-22T03:19:54","slug":"el-tree%e5%8d%95%e9%80%89%e4%b8%94%e7%88%b6%e8%8a%82%e7%82%b9%e4%b8%8d%e8%83%bd%e7%82%b9%e5%87%bb","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8556","title":{"rendered":"el-tree\u5355\u9009\u4e14\u7236\u8282\u70b9\u4e0d\u80fd\u70b9\u51fb"},"content":{"rendered":"<figure class=\"mdx-lazyload-container\" style=\"max-width:269px\"><div style=\"padding-top:79.182156133829%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"269\" height=\"213\" class=\"alignnone size-full wp-image-8557 lazyload\" title=\"el-tree\u5355\u9009\u4e14\u7236\u8282\u70b9\u4e0d\u80fd\u70b9\u51fb\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/07\/singlertree1.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/07\/singlertree1.png\"><\/figure>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre>&lt;el-tree\r\n  v-if=\"showTree\"\r\n  :data=\"date\"\r\n  show-checkbox\r\nnode-key=\"id\"\r\nref=\"tree\"\r\ncheck-strictly\r\n:highlight-current='true'\r\n:check-on-click-node=\"true\"\r\n:accordion=\"true\"\r\n:default-checked-keys=\"[checkedkey]\"\r\n:default-expanded-keys=\"checkedkey\"\r\n:props=\"defaultProps\"\r\n:default-expand-all=\"false\"\r\n@check-change=\"parentModules\"\r\n@check=\"currentChecked\"\r\n&gt;&lt;\/el-tree&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<pre>      date: [\r\n        {\r\n        moduldCode: 1,\r\n        jgmc: '\u4e00\u7ea7 2',\r\n        disabled:true,\r\n        children: [{\r\n          moduldCode: 3,\r\n          jgmc: '\u4e8c\u7ea7 2-1',\r\n          disabled:true,\r\n          children: [{\r\n            moduldCode: 4,\r\n            jgmc: '\u4e09\u7ea7 3-1-1'\r\n          }, {\r\n            moduldCode: 5,\r\n            jgmc: '\u4e09\u7ea7 3-1-2',\r\n          }]\r\n        }, {\r\n          moduldCode: 2,\r\n          jgmc: '\u4e8c\u7ea7 2-2',\r\n          disabled:true,\r\n          children: [{\r\n            moduldCode: 6,\r\n            jgmc: '\u4e09\u7ea7 3-2-1'\r\n          }, {\r\n            moduldCode: 7,\r\n            jgmc: '\u4e09\u7ea7 3-2-2',\r\n          }]\r\n        }]\r\n       }\r\n      ],\r\n      checkedkey: [],\r\n      defaultProps: {\r\n        \/\/ children: \"child\",\r\n        \/\/ label: \"moduleName\",\r\n        label: \"jgmc\",\r\n        \/\/ id:'moduldCode' \/\/\u53ef\u8981\u53ef\u4e0d\u8981\r\n      },\r\n      \/\/ \u53d6uniqueValue\u503c\u7684\u65f6\u5019\uff0c\u5217\uff1auniqueValue[0]\u5426\u5219\u4f1a\u662f\u4e00\u4e2a\u6570\u7ec4\r\n      uniqueValue:'',\/\/\u6700\u540e\u62ff\u5230\u7684\u552f\u4e00\u9009\u62e9\u7684moduldCode\u503c,\u76f8\u5f53\u4e8eid\r\n      showTree:false\r\n\r\nmethods: {\r\n currentChecked (nodeObj, SelectedObj) {\r\n   console.log(SelectedObj)\r\n   console.log(SelectedObj.checkedKeys) \/\/ \u8fd9\u662f\u9009\u4e2d\u7684\u8282\u70b9\u7684key\u6570\u7ec4\r\n   console.log(SelectedObj.checkedNodes) \/\/ \u8fd9\u662f\u9009\u4e2d\u7684\u8282\u70b9\u6570\u7ec4\r\n },\r\n  \/\/\u8282\u70b9\u9009\u62e9\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\r\n  parentModules(data,checkbox,node){\r\n   if(checkbox){\r\n     \/\/ \u6ce8\u610f\uff1a\u540e\u7aef\u8fd4\u56de\u7684node-key\u4e0d\u662fid\uff0c\u662fmoduldCode\r\n    this.$refs.tree.setCheckedKeys([data.id]); \/\/data.moduldCode \u6839\u636e\u81ea\u5df1\u9700\u6c42\u6539\uff0c\u6211\u8fd9\u4e2a\u662fmoduldCode\uff0c\u4e0a\u9762data\u914d\u7f6e\u4e2d\u6211\u5df2\u7ecf\u4fee\u6539\u4e86\u7684\r\n    this.uniqueValue = this.$refs.tree.getCheckedKeys().toString(); \/\/\u4e0d\u52a0\u4e0atoString()\u4f1a\u62a5\uff1a\u671f\u671b\u4e00\u4e2a\u6570\u5b57\u6216\u8005\u5b57\u7b26\u4e32\uff0c\u7ed3\u679c\u8fd4\u56de\u7684\u662f\u6570\u7ec4\r\n   }else{\r\n    this.uniqueValue = this.$refs.tree.getCheckedKeys().toString();\r\n    if(this.uniqueValue.length == 0){\r\n      this.uniqueValue = ''\r\n    }\r\n   }\r\n },\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>\u6307\u5b9a\u9ed8\u8ba4\u88ab\u9009\u4e2d\u9879\u76ee\uff1a<\/p>\n<pre>checkedkey: ['id']  \/\/<\/pre>\n<p>&nbsp;<\/p>\n<p>\u521d\u59cb\u5316\uff1a\u4e0d\u5c55\u5f00\uff0c\u90fd\u4e0d\u88ab\u9009\u4e2d<\/p>\n<pre>this.$nextTick(function (){\r\n this.checkedkey = [];\r\n this.showTree = true\r\n})<\/pre>\n<p>&nbsp;<\/p>\n<p>\u53c2\u8003\uff1a<a href=\"https:\/\/www.cnblogs.com\/tlfe\/p\/11693772.html\" target=\"_blank\" rel=\"noopener\">https:\/\/www.cnblogs.com\/tlfe\/p\/11693772.html<\/a><\/p>\n<p><a href=\"http:\/\/hanwenblog.com\/post\/20.html\" target=\"_blank\" rel=\"noopener\">http:\/\/hanwenblog.com\/post\/20.html<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; &lt;el-tree v-if=&#8221;showTree&#8221; :data=&#8221;date&#8221;  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8556","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8556"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8556\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}