700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > el-tree 实现仅限叶子节点显示勾选框 并且只能单选

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

时间:2019-06-06 15:28:45

相关推荐

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;}}

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。