vue 实现下拉树形选择，支持输入过滤功能

1、效果··

 

 2、代码

<el-select v-model="organForm.manageId" size="small" placeholder="请选择">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <el-option hidden :label="organForm.manageName" :value="organForm.manageId"></el-option>
          <el-tree :data="orgManageTreeData" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree"></el-tree>
</el-select>

3、绑定值都需要在data中定义

defaultProps: {
        children: 'children',
        label: 'manageName'
      },
filterText:'',
organForm:{
        manageId:'',
        checkName:'',
        manageName: ''
      },
orgManageTreeData:[
        {
          id: 1,
          manageName: '01',
          status: '1',
          children: [
            {
              id: 11,
              manageName: '011'
            }
          ]
        },
        {
          id: 2,
          manageName: '02'
        }
      ],

4、通过接口获取到树的数据

 if (res.success) {
            this.orgManageTreeData = res.data
          } else {
              this.$message({
                  duration: 1500,
                  type: 'warning',
                  message: res.message
              });
          }

5、树点击调用

handleNodeClick(data){
      参见elmentUI官网，点击调用方法
    },

6、实现树节点过滤

filterNode(value, data) {
      if (!value) return true;
        return data.manageName.indexOf(value) !== -1;
    },
参见官网

7，在watch中监听输入框的值

filterText(val) {
      this.$refs.tree.filter(val);
    },