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

迈不过友情╰ 2021-10-23 07:59 2851阅读 0赞

题外话：如何修改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;
                }
            }

### 效果图： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20211023/d23db92910fa4774a56b78f4eba890e8.png