<el-tree
:data="data"
ref="menuPc"
node-key="id"
empty-text="无数据"
:props="defaultProps"
:filter-node-method="filterNode"
></el-tree>
export default {
name: "rolePower.vue",
components: {},
props: {},
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
PCcheckedKeys:[1,4,8]
};
},
watch: {
PCcheckedKeys(val) {
this.$refs.menuPc.filter(this.PCcheckedKeys);
}
},
methods: {
filterNode(value, data) {
//value是filter方法传过来的数据，data是遍历的树结构一行的数据对象
return value.some((i)=> data.id === i);
//此方法只用返回true/false，来控制页面上是否显示树结构的那一行，筛选后页面上就剩下符合你的筛选条件的数据了
},
}
