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

1，指定层级不显示复选框

<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，根据数据动态指定每个节点是否显示复选框

<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>