首页el-tree设置show-checkbox如何实现不让父级出现勾选框或者不让勾选

el-tree设置show-checkbox如何实现不让父级出现勾选框或者不让勾选

时间: 2025-06-09 10:00:58 浏览: 24

在Element UI的`el-tree`组件中，如果你想要设置每个节点都有勾选框（checkbox），但不想让父节点显示勾选状态或者不允许用户直接勾选父节点，你可以通过自定义渲染函数（render-content）来实现。下面是一个简单的例子： ```javascript <template> <el-tree :data="treeData" show-checkbox default-expand-all :props="defaultProps" render-content="renderNode" ></el-tree> </template> <script> export default { data() { return { treeData: [ // ...你的数据结构 ], defaultProps: { children: '__children__', // 标识子节点属性 label: 'name', // 显示节点名称的属性 disabled: false // 如果需要，可以添加一个属性控制是否可选中 }, }; }, methods: { renderNode(h, { node, data, store }) { const { children } = data; // 获取当前节点的子节点 if (node.level === 0) { // 判断是否为根节点 return h('span', {}, [h('el-checkbox', { props: { disabled: true }, on: { input: () => {} } })], node.label); } return h('span', {}, [ h('el-checkbox', { on: { input: (_, checked) => store.setChecked(data, checked) } }), node.label, // ...其他节点内容 ]); }, }, }; </script> ``` 在这个例子中，我们覆盖了默认的`render-content`方法，对于根节点，我们手动创建了一个不可交互的`el-checkbox`。如果子节点允许勾选，则会保留其勾选功能。

阅读全文