element-ui树形控件el-tree单选实现

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实现

//被选择的节点Id
metaNodeCheckedId: []
handleMetaNodeClick(data, checked) {
              let res = this.$refs.metaNodeTree.getCheckedNodes();
              let currCheckedNode = [];//当前选中的节点
              let resultCheckedNode = [];//最终选中的节点
              res.forEach(item => {
                  currCheckedNode.push(item.id);
              });
              if (checked) {
                  //清除上次的选择，重新记录本次选中的节点
                  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))];
              //数组是否包含指定元素
              function arrayContains(array, id) {
                  for (let i = 0; i < array.length; i++) {
                      if (array[i] == id) return true;
                  }
                  return false;
              }
          },