实战：element-ui 树形控件之点击单选或多选

效果图：

重点：
如果需要对Tree节点进行过滤筛选，调用 Tree 实例的filter方法，参数为输入的关键词。需要注意的是，需要设置filter-node-method，值为过滤函数。具体如下：

HTML部分：

<el-tree
   ref="tree"
   :data="treeData"
   :expand-on-click-node="false"
   :props="defaultProps"
   :filter-node-method="filterNode"
   @node-click="handleClick"
 >
   <span slot-scope="{ node, data }">
     <template>
       <i
         :class="{
           'el-icon-folder': !node.expanded,
           'el-icon-folder-opened': node.expanded,
           'el-icon-user-solid': data.hasChildren === '2'
         }"
         style="color: #1890ff;"
       />
       <span>{{ node.label }}</span>
       <i
         v-if="selectedList.find(item => item.name === node.label)"
         class="el-icon-check"
       />
     </template>
   </span>
 </el-tree>

JS部分：

data() {
    return {
      defaultProps: {
        children: 'childrenList', // childrenList--映射tree数据源中的字段
        label: 'name' // name--映射tree数据源中的字段
      },
      treeData: [], // tree数据源
      searchVal: '', // 输入的关键词
      selectedList: []， // 已选中的数据
      selectType：'single',
      setNode: new Set()
    }
  },
watch: {
	// 监听输入的关键词，调用 Tree 实例的filter方法
   searchVal(val) {
     this.$refs.tree.filter(val);
   }
 }，
methods: {
	// 过滤节点
   filterNode(value, data) {
     if (!value) return true;
     return data.name.indexOf(value) !== -1;
   }，
   // 实现点击多选或单选
  handleClick(nodeData) {
     if (this.selectType === 'single') {
       // 单选
       if (nodeData.hasChildren === 1) return // 表示有子节点
       if (this.setNode.has(nodeData)) {
         this.setNode.delete(nodeData)
       } else {
         this.setNode.clear()
         this.setNode.add(nodeData)
       }
     } else {
       // 多选
       this.setNode.has(nodeData)
         ? this.setNode.delete(nodeData)
         : this.setNode.add(nodeData)
     }
     this.selectedList = [...this.setNode]
   }
}