el-tree看不见勾选框disabled后

在Element UI的el-tree组件中，如果想要隐藏勾选框并禁用它们，可以利用`default-checked-keys`、`check-strictly`以及`render-content`属性。当你设置`default-checked-keys`为空数组并且将`check-strictly`设为`true`时，勾选框默认不会显示。

例如：

<el-tree
  :data="treeData"
  :default-checked-keys="[]"
  check-strictly="true"
  :render-content="renderTreeNode"
></el-tree>

<script>
methods: {
  renderTreeNode(node, data) {
    return (
      <span>
        {node.label} <i v-if="!node.indeterminate && !node.disabled">[{{ node.checked ? '已选择' : '未选择' }}]</i>
      </span>
    );
  }
}
</script>

在这个例子中，`render-content`函数用于自定义每个节点的内容，当`node.disabled`为真时，会跳过勾选状态的展示。如果你只想禁用勾选功能而不是完全隐藏，你可以直接在节点上添加`disabled`属性。

相关问题

页面布局左侧勾选el-tree实现右侧动态添加el-select和el-option的的示例代码

哎呀，这个问题好简单啊！下面就是示例代码：

<template>
<div class="container">
<el-tree
:data="treeData"
:props="treeProps"
@node-click="handleNodeClick"
/>
<div class="content">
<el-select v-model="value" placeholder="请选择" :disabled="!isOptionVisible">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</template>

<script>
export default {
data() {
return {
value: "",
isOptionVisible: false,
treeData: [
{
id: 1,
label: "Option 1",
},
{
id: 2,
label: "Option 2",
},
],
options: [
{
label: "Option 1",
value: "1",
},
{
label: "Option 2",
value: "2",
},
],
treeProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleNodeClick(node) {
if (node.id === 1) {
this.isOptionVisible = true;
} else {
this.isOptionVisible = false;
}
},
},
};
</script>

<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
.el-tree {
width: 300px;
height: 500px;
}
.content {
margin-left: 30px;
}
}
</style>

而且，这个示例代码还配置了整个页面的布局，希望对你有帮助哦！那么，笑话时间到了：为什么小明成绩一直那么好？因为他坐在排头！

el-tree disabled: true不生效

如果 `el-tree` 的 `disabled` 属性设置为 `true` 但是没有生效，可能是因为该属性只能禁用 `el-tree` 的节点选择，而不能禁用整个树。如果您想禁用整个 `el-tree`，可以使用 `v-if` 或者 `v-show` 来控制树的显示与隐藏。

如果您只想禁用 `el-tree` 的节点选择，可以尝试添加 `node-key` 属性并将其设置为一个不可选中的值，例如：

<el-tree :data="treeData" :node-key="'id'" :disabled="true"></el-tree>

这里的 `node-key` 属性指定了节点的唯一标识符，可以根据实际情况进行调整。需要注意的是，如果您使用了 `check-strictly` 属性来控制勾选行为，那么禁用节点选择可能会导致该属性失效。