elementUI Tree 树形控件实现单选+获取树形控件单选框勾选内容
html部分
<el-tree :data="data" show-checkbox node-key="id" ref="tree" check-strictly highlight-current @check-change="handleClick" :props="defaultProps">
js部分
data:[{ id: 0, label: '一级菜单', children: [ { id: 1, label: '二级1-1', },] }], defaultProps: { children: </span>'children'<span style="color: rgba(0, 0, 0, 1)">, label: </span>'label'<span style="color: rgba(0, 0, 0, 1)"> }<br><br>...<br></span></pre>
handleClick(data,checked, node){
if(checked){//关键
this.$refs.tree.setCheckedNodes([data]);
}
},
...
获取勾选框的内容 Array[id]
getCheckedKeys和getHalfCheckedKeys都是官方文档方法,组合起来 获取当前 树状插件 当前的勾选框checkout 内容
let resArr=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
扩展参考(及其 屏蔽父级勾选框的方法)