需求:可以筛选并获取当前树结构中选中的用户ID
代码:
<el-input v-model="filterText" placeholder="输入关键字进行过滤" />
<el-tree
ref="tree"
:data="userTree"
show-checkbox
node-key="id"
:filter-node-method="filterNode"
highlight-current
:props="defaultProps"
@check-change="handleCheckChange"
/>
export default {
data(){
filterText: '', // 筛选树的关键字
defaultProps: {
children: 'children',
label: 'name'
},
userTree:[],// 树的全部数据
uesrID: []
},
watch: {
// 过滤
filterText(val) {
this.$refs.tree.filter(val)
}
},
methods: {
// 筛选节点,是否隐藏
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
handleCheckChange(data, checked, indeterminate) {
// 获取当前选中的所有节点ID
this.userID = this.$refs.tree.getCheckedKeys()
}
}
}