根据el-tree可设置某些节点的禁用状态+设置对应节点checkbox样式为display:none,可实现勾选框动态显示。
分享一下大致代码:
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
}