根据后端传的id控制element-tree哪些被禁用
时间: 2023-12-02 13:02:34 浏览: 31
如果你想根据后端传来的id来控制element-tree哪些节点被禁用,你可以将后端传来的id与每个节点的id进行比对,来判断该节点是否应该被禁用。下面是一个示例代码:
```html
<template>
<el-tree :data="data" :node-key="nodeKey" :props="defaultProps"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 2,
label: '二级 1-1',
children: [
{
id: 3,
label: '三级 1-1-1'
},
{
id: 4,
label: '三级 1-1-2'
}
]
},
{
id: 5,
label: '二级 1-2'
}
]
}
],
nodeKey: 'id',
defaultProps: {
children: 'children',
label: 'label',
disabled: 'disabled'
}
}
},
mounted() {
// 模拟后端传来的id
const disabledIds = [3, 5]
this.disableNodes(disabledIds)
},
methods: {
disableNodes(disabledIds) {
const loop = (data) => {
data.forEach(item => {
if (disabledIds.includes(item.id)) {
item.disabled = true
}
if (item.children) {
loop(item.children)
}
})
}
loop(this.data)
}
}
}
</script>
```
在上面的示例中,我们在mounted钩子函数中模拟了后端传来的id,并将其存储在一个数组中。然后,我们定义了一个名为disableNodes的方法,该方法接收一个参数,即后端传来的id数组。在disableNodes方法中,我们使用递归的方式遍历整个树形结构,比对每个节点的id是否在disabledIds数组中,如果是,则将该节点的disabled属性设置为true。最后,我们在组件的template模板中,将每个节点的disabled属性与element-tree的disabled属性进行绑定,这样就完成了根据后端传来的id控制element-tree哪些节点被禁用的操作。