ElementUi el-tree 设置指定级别节点显示复选框(checkbox)
今天在使用elementUI的tree进行开发时,碰到了一个树中只显示第一个级别的节点的checkbox,经过查找和实验有两种方式。
1、通过css修改方式(单个应用,相对简单)
1.1需要实现效果如图
1.2修改css
F12,查看checkbox所处的位置,如图
代码修改如下:
<style lang="scss">
#unSchTree .el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner{
display: none;
}
.el-checkbox .el-checkbox__inner{
display: inline-block;
}
}
PS:#unSchTree为当前tree的id,下面的css控制第一级显示checkbox,不加也可以,注意不能添加scoped,否则不起作用。
2、通过源码修改(可作为模板使用,相对复杂)
网上有人写了,就不转载了,大体思路就是修改源码中的标签,修改 v-if 的内容,新增一个字段(json中可约定好,例如isShowCheck)来与默认的showCheckBox共同来决定是否显示,然后自定义一个tree组件之后再使用,去具体请百度:修改element-ui中tree的checkbox