网上有很多重置el-tree勾选以达到单选的目的，
主要思路是在点击多选框或者是点击树节点时候setCheckedNodes 设置当前勾选节点
但是亲身实验效果并不理想，多层级或快速点击时都会选择多个或者页面视图是勾选一个，但是获取勾选元素时还是多个节点被勾选
于是，展示自定义节点内容，并加入radio单选按钮真正的实现单选；
image.png
首先通过slot-scope="{ node, data }" 自定义节点内容
<el-tree ref="tree" :indent="7" v-loading="loadingTree"
:expand-on-click-node="false" empty-text="正在加载中" element-loading-text="正在加载中"
:data="treeData" :default-expanded-keys="keyIdArray" :props="defaultProps" node-key="id">
<span slot-scope="{ node, data }">
<el-radio v-model="radio"
:label="data.id"
@change="change(data)">
{{ node.label }}
</el-radio>
</span>
</el-tree>
data中设置并绑定单选框的值
data() {
return {
defaultProps: {
children: "childList",
label: "name"
},
radio: "", // 这一行
keyIdArray: ["1"],
treeData: [],
loadingTree: false,
checkedList: [] //选中节点的数据
};
},
通过点击时单选框change事件赋值给checkedList
change(data) {
this.checkedList = [];
this.checkedList[0] = data;
},
