element-ui tree组件禁用文字
时间: 2023-08-03 12:25:05 浏览: 40
在 ElementUI 的 Tree 组件中,可以通过设置节点的 `disabled` 属性来禁用节点的文字。禁用后,节点的文字将变为灰色,同时无法被选中。
具体步骤如下:
1. 在 Tree 组件的数据中,为需要禁用文字的节点添加 `disabled` 属性。
```javascript
data: [
{
label: '节点1',
children: [
{
label: '子节点1',
disabled: true // 禁用文字
},
{
label: '子节点2'
}
]
},
{
label: '节点2'
}
]
```
2. 在 Tree 组件中使用 `node-key` 属性来指定节点的唯一标识符。
```html
<el-tree :data="data" :node-key="node => node.id"></el-tree>
```
3. 在 CSS 中设置 `.is-disabled .el-tree-node__label` 类的样式,以改变禁用节点的文字颜色。
```css
.is-disabled .el-tree-node__label {
color: #c0c4cc;
}
```
这样就可以禁用 Tree 组件中节点的文字了。完整代码如下:
```html
<template>
<el-tree :data="data" :node-key="node => node.id"></el-tree>
</template>
<style>
.is-disabled .el-tree-node__label {
color: #c0c4cc;
}
</style>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '子节点1',
disabled: true // 禁用文字
},
{
id: 3,
label: '子节点2'
}
]
},
{
id: 4,
label: '节点2'
}
]
};
}
};
</script>
```