实战：element Tree 树形控件之过滤树节点

效果图：

重点：
如果需要对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.otype === '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: [] // 已选中的数据
    }
  },
watch: {
	// 监听输入的关键词，调用 Tree 实例的filter方法
   searchVal(val) {
     this.$refs.tree.filter(val);
   }
 }，
methods: {
   filterNode(value, data) {
     if (!value) return true;
     return data.name.indexOf(value) !== -1;
   }
}