el-tree 根据返回数据动态显示勾选框

1,441 阅读1分钟

根据el-tree可设置某些节点的禁用状态+设置对应节点checkbox样式为display:none,可实现勾选框动态显示。

pic.PNG

check.PNG

分享一下大致代码:

1 把勾选框设置为显示状态

<el-tree ref="tree" class="tree" :load="loadNode" :data="Tree" node-key="id" @check="handleCheckChange" lazy :props="props" show-checkbox>
    <template v-slot="{ node, data }">
        <span class="camera-node-text">{{ node.label }}</span>
    </template>
  </el-tree>

2 Tree对象加上disabled属性

{
    name: item.name,
    id: item.uuid,
    leaf: item.leaf,
    disabled: true
  }

3 设置disabled节点勾选框不显示

  /deep/.el-checkbox__input.is-disabled .el-checkbox__inner{
    display: none
}