element树形禁止选中
时间: 2023-07-05 08:27:38 浏览: 82
如果你想禁止element树形控件的选中,你可以在tree组件中使用node-key属性来控制节点的唯一标识符。然后,在node-config中设置一个名为"disabled"的属性,它的值可以为布尔类型或一个返回布尔类型的函数。如果该属性的值为true或返回值为true的函数,则该节点将被禁用。下面是一个示例代码:
```html
<template>
<el-tree :data="data" :node-key="nodeKey" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1',
disabled: true
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2'
}
]
}
],
nodeKey: 'id',
defaultProps: {
children: 'children',
label: 'label',
disabled: 'disabled'
}
}
},
methods: {
handleNodeClick(data) {
if (!data.disabled) {
console.log(data.label)
}
}
}
}
</script>
```
在上面的示例中,我们设置了一个名为"disabled"的属性,并将其设置为true,这样第一个三级节点将被禁用。当用户单击节点时,我们通过判断该节点的"disabled"属性是否为true来决定是否执行相关操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)