element-ui tree Tree control check box for radio selection


Project development in the use of tree Tree control to achieve radio function ,element-ui The official gave out the incident , There is no radio operation , I studied it myself , The code is as follows ：

1,template In the code ： 
<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeForm"
show-checkbox check-strictly @check-change="handleNodeClick"> </el-tree>
2,data In the code ：
data() { return { checkedId: '', treeData: [{ id: 1, label: ' class a 1', children:
[{ id: 4, label: ' second level 1-1', children: [{ id: 9, label: ' Level 3 1-1-1' }, { id: 10,
label: ' Level 3 1-1-2' }] }] }, { id: 2, label: ' class a 2', children: [{ id: 5, label:
' second level 2-1' }, { id: 6, label: ' second level 2-2' }] }, { id: 3, label: ' class a 3', children: [{
id: 7, label: ' second level 3-1' }, { id: 8, label: ' second level 3-2' }] }], defaultProps: {
children: 'children', label: 'label' } } }
3,methods In the code ：
handleNodeClick(data, checked, node) { if(checked === true) { this.checkedId =
data.id; this.$refs.treeForm.setCheckedKeys([data.id]); } else { if
(this.checkedId == data.id) { this.$refs.treeForm.setCheckedKeys([data.id]); }
} }
 

Technology
©2020-2025 ioDraw All rights reserved, Privacy Policy