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