1、界面元素

<el-tree :data="datass"
                         check-strictly
                         show-checkbox
                         default-expand-all
                         node-key="id"
                         ref="metaNodeTree"
                         highlight-current
                         :props="{children: 'child',label: 'name'}"
                         @check-change="handleMetaNodeClick">
</el-tree>

2、js實(shí)現(xiàn)

//被選擇的節(jié)點(diǎn)Id
metaNodeCheckedId: []
handleMetaNodeClick(data, checked) {
              let res = this.$refs.metaNodeTree.getCheckedNodes();
              let currCheckedNode = [];//當(dāng)前選中的節(jié)點(diǎn)
              let resultCheckedNode = [];//最終選中的節(jié)點(diǎn)
              res.forEach(item => {
                  currCheckedNode.push(item.id);
              });
              if (checked) {
                  //清除上次的選擇，重新記錄本次選中的節(jié)點(diǎn)
                  currCheckedNode.forEach(item => {
                      if (!arrayContains(this.metaNodeCheckedId, item)) {
                          resultCheckedNode.push(item);
                      }
                  });
                  this.$refs.metaNodeTree.setCheckedKeys(resultCheckedNode);
              } else {
                  this.metaNodeCheckedId = [];
              }
              this.metaNodeCheckedId = [...new Set(currCheckedNode.concat(resultCheckedNode))];
              //數(shù)組是否包含指定元素
              function arrayContains(array, id) {
                  for (let i = 0; i < array.length; i++) {
                      if (array[i] == id) return true;
                  }
                  return false;
              }
          },