<el-tree ref="treeRef" :data="menuTreeList" show-checkbox default-expand-all node-key="id" :props="defaultProps" class="disabled-tree"> </el-tree>
::v-deep .disabled-tree {
.el-checkbox {
pointer-events: none;
cursor: not-allowed;
}
.el-checkbox__inner::after {
border-color: #c0c4cc !important;
}
.el-checkbox__input {
.el-checkbox__inner {
// 禁用的样式
background-color: rgb(237, 242, 252);
border-color: rgb(217, 217, 217);
}
&.is-checked {
// 勾选状态下的样式,不加的话禁用时勾选是灰色的
.el-checkbox__inner {
background-color: #f2f6fc;
border-color: #dcdfe6;
}
}
}
}
运行结果