el-tree的数据在使用“filter-node-method”的方法之后，如何只选中筛选后的子节点
主要使用el-tree提供的@check来实现。
<el-input
v-model="filterText"
style="margin-top: 10px"
placeholder="请输入查询名称"
clearable
/>
<el-tree
ref="tree"
show-checkbox
highlight-current
:data="list"
:default-checked-keys="checkedList"
node-key="id"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterNode"
@check="check"
/>
<script>
export default {
data() {
return {
filterText: '',
formInline: {},
list: [],
searchKey: '',
disabled: false,
ids: [],
checkedList: [],
defaultSelection: [],
multipleSelection: [],
defaultProps: {
children: 'childGroups',
label: 'name'
}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
},
},
methods: {
check(data) {
//data即当前点击的节点
if (data.childGroups.length) {
// 获取当前选中的叶子节点的id
const checkedIds = this.getLeafNodes(data.childGroups)
checkedIds.forEach((item) => {
const node = this.$refs.tree.getNode(item)//根据id获取node
if (!node.visible && node.checked) {//将选中且隐藏的节点设置为 不选中
this.$refs.tree.setChecked(item, false)
}
})
}
},
//获取叶子节点的数据
getLeafNodes(tree) {
const arr = []
tree.length &&
tree.forEach((item) => {
if (item.childGroups && item.childGroups.length) {
arr.push(...this.getLeafNodes(item.childGroups))
} else {
arr.push(item.id)
}
})
return arr
},
//父组件调用此方法，获取被选中的叶子节点
getResult() {
const result = this.$refs.tree.getCheckedNodes(true)
return result
},
}
}
</script>
