Vue.js - 控制ElementUI的tree组件各级节点复选框显示或者隐藏教程
我们知道 Element-UI 的 el-tree 树形组件有一个 show-checkbox 属性,可以控制所有节点是否显示复选框。但是在实际应用中,我们可能会遇到一些复杂的需求,比如只显示某些特定层级的节点复选框,或根据某些条件动态控制节点复选框的显示或隐藏。下面我将介绍如何通过 Vue.js 结合 Element-UI 实现这些功能。
(2)如果一级、二级节点的复选框都不显示,则可以使用如下 CSS 样式,其他层级同理。
1,指定层级不显示复选框
(1)我们可以通过 css 将指定层级复选框的 display 样式设置为 none,从而实现隐藏效果。比如下面样例我们将第一层级节点的复选框隐藏。
<template> <div> <el-tree class="my-tree" :data="treeData" :props="defaultProps" show-checkbox> </el-tree> </div> </template> <script> export default { name: 'MyTree', data() { return { treeData: [ { id: 1, name: "电子产品", children: [ { id: 2, name: "电脑", children: [ { id: 3, name: "苹果笔记本" }, { id: 4, name: "戴尔笔记本" } ] }, { id: 5, name: "手机", children: [ { id: 6, name: "iPhone" }, { id: 7, name: "三星Galaxy" } ] } ] }, { id: 8, name: "家具", children: [ { id: 9, name: "椅子", children: [ { id: 10, name: "网易严选办公椅" }, { id: 11, name: "IKEA餐椅" } ] } ] } ], defaultProps: { children: 'children', label: 'name' } } }, methods: { } } </script> <style scoped> /*** 一级节点不显示复选框 */ ::v-deep .my-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: none; } </style>
(2)如果一级、二级节点的复选框都不显示,则可以使用如下 CSS 样式,其他层级同理。
/*** 一级、二级节点不显示复选框 */ ::v-deep .my-tree > .el-tree-node > .el-tree-node__content .el-checkbox, ::v-deep .my-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content .el-checkbox { display: none; }
2,根据数据动态指定每个节点是否显示复选框
(1)如果需要显示或者隐藏复选框的层级并不固定,甚至同一层级下有的需要显示有的需要隐藏,那么上面单纯使用 css 方法已经无法实现了。比如我们要实现如下效果:
(2)实现代码如下:
- 在 tree 组件绑定的数据 treeData 中,每个节点我都添加了一个是否显示复选框的标志 showCheckbox。
- 通过 :render-content 属性指定自定义节点内容的渲染函数 renderContent,该函数会判断节点数据的 showCheckbox 属性,如果 showCheckbox 为 false,添加 hide-checkbox 样式类。
- 最后使用 css 选择 .my-tree 类下的 .el-tree-node__content 元素,如果其包含 hide-checkbox 类的子元素(hide-checkbox 是添加在 label 上,不是在 checkbox 上),则将其下面的 .el-checkbox 隐藏复。
<template> <div> <el-tree class="my-tree" :data="treeData" :props="defaultProps" :render-content="renderContent" show-checkbox> </el-tree> </div> </template> <script> export default { name: 'MyTree', data() { return { treeData: [ { id: 1, name: "电子产品", showCheckbox: false, children: [ { id: 2, name: "电脑", showCheckbox: false, children: [ { id: 3, name: "苹果笔记本", showCheckbox: true, }, { id: 4, name: "戴尔笔记本", showCheckbox: true, } ] }, { id: 5, name: "手机", showCheckbox: false, children: [ { id: 6, name: "iPhone", showCheckbox: true, }, { id: 7, name: "三星Galaxy", showCheckbox: true, } ] } ] }, { id: 8, name: "家具", showCheckbox: false, children: [ { id: 10, name: "办公椅", showCheckbox: true }, { id: 11, name: "餐椅", showCheckbox: true } ] } ], defaultProps: { children: 'children', label: 'name' } } }, methods: { renderContent(h, { node, data }) { return h('div', { // 判断是否需要显示checkbox class: 'el-tree-node__label ' + (data.showCheckbox ? '' : 'hide-checkbox'), }, data.name) } } } </script> <style scoped> ::v-deep .my-tree .el-tree-node__content:has(.hide-checkbox) .el-checkbox { display: none; } </style>