当前位置: > > > Vue.js - 控制ElementUI的tree组件各级节点复选框显示或者隐藏教程

Vue.js - 控制ElementUI的tree组件各级节点复选框显示或者隐藏教程

    我们知道 Element-UI el-tree 树形组件有一个 show-checkbox 属性,可以控制所有节点是否显示复选框。但是在实际应用中,我们可能会遇到一些复杂的需求,比如只显示某些特定层级的节点复选框,或根据某些条件动态控制节点复选框的显示或隐藏。下面我将介绍如何通过 Vue.js 结合 Element-UI 实现这些功能。

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>
  
评论0