el-tree 实现仅限叶子节点显示勾选框,并且只能单选

题外话:如何修改tree当前行的高亮显示样式

.el-tree-node:focus > .el-tree-node__content {
            background-color: #ccc !important;
        }

好,现在正式开始实现标题的问题,具体代码如下
(最后通过 this.$refs.tree.getCheckedNodes() 方法来获取选中的叶子节点)

第一步,实现单选功能

 <el-tree ref="tree"
          show-checkbox
          :check-strictly="true"   ---严格遵循父子不关联
          :data="editCBRdata"
          :props="defaultProps"
          node-key="id"  ---后面要使用getCheckedNodes,必须要先定义此属性
          @node-click="handleNodeClick"
          @check-change="checkChange">
el-tree>

<script>
	...
	methods:{
	 	handleNodeClick(item,node,self){ //自己定义的editCheckId,防止单选出现混乱
            this.editCheckId=item.id;
            this.$refs.tree.setCheckedKeys([item.id])
    	},
    	checkChange(item,node,self){
            if (node == true) {
               this.editCheckId=item.id;
               this.$refs.tree.setCheckedKeys([item.id])
            }else {
               if (this.editCheckId == item.id) {
                   this.$refs.tree.setCheckedKeys([item.id])
               }
            }
   		}
   }
script>

第二步,实现指定叶子节点显示勾选框

.el-tree-node{
            .is-leaf + .el-checkbox .el-checkbox__inner{
                display: inline-block;
            }
            .el-checkbox .el-checkbox__inner{
                display: none;
            }
        }

效果图:

el-tree 实现仅限叶子节点显示勾选框,并且只能单选_第1张图片

你可能感兴趣的:(el-tree 实现仅限叶子节点显示勾选框,并且只能单选)