通过输入框文字过滤的树形控件
<div style="width: 100%">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
:data="treeData"
:props="defaultProps"
:check-strictly="true"
node-key="id"
show-checkbox
@check="handleCheck"
:filter-node-method="filterNode"
ref="tree"
></el-tree>
</div>
js代码
<script>
export default {
name: "WorkInfo",
components: {
Editor,ImageUpload,PanelGroup
},
data() {
return {
treeData: [
{
id: "1",
label:"11",
children:[
id: "1-1",
label:"1-11",
children:[]
]
},
{
id: "2",
label:"22",
children:[]
},
],
filterText: '',
defaultProps: {
children: 'children',
label: 'label',
disabled:function(data,node){
if(data.children){
return true
}else{
return false
}
}
},
selectNode: {} // 选中的节点
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleCheck(data, checked) {
if (checked) {
this.$refs.tree.setCheckedNodes([data])
this.selectNode = data
}
},
}
};
</script>