vue 实现下拉树形选择，包含过滤功能

效果

 

 

 

 

 

 

 

视图层代码

<el-form-item label="猫咪名称:">
    <el-select v-model="filters.deptName" placeholder="请选择猫咪">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-option hidden :label="filters.deptName" :value="filters.deptCode"></el-option>
        <el-tree :data="deptOptions" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
        </el-tree>
    </el-select>
</el-form-item>

　　

data数据

// 部门树选项
deptOptions: [{
id:1,
label:'哆啦',
children:[{
id:2,
label:'一一'
}]
},{
id:3,
label:'弟弟',
children:[{
id:4,
label:'醒醒'
},{
id:5,
label:'miumiu'
},{
id:6,
label:'mini'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
filterText: '',
filters: {
deptName: '',
deptCode: ''
},

　　

watch监听过滤文本

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

　　

method方法（过滤、点击）

//关键字过滤
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//点击选择
handleNodeClick(data) {
this.filters.deptName = data.label
this.filters.deptCode = data.id
}

　

————————————————
版权声明：本文为CSDN博主「奈奈子很甜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44274094/article/details/127050667