Element tree组件 多选改为单选

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

开发中会遇见需要使用单选的菜单树，但是element中的tree组件是多选，我们可以通过官方提供的属性及回调函数，将多选功能改造为单选功能。效果如下所示

Video_2023-04-13_110320

---

一、引入tree组件

	<el-tree 
		ref="tree"
		class="treeRadio" 
		:data="treeList" 
		show-checkbox 
		check-strictly 
		node-key="id" 
		@check="handleClick" 
		@check-change="handleClickChange" 
	/>

二、js逻辑

1.方式一 通过check函数点击复选框时将上次的数据删除，选择新的节点

代码如下（示例）：

	 handleClick(data, tree) {
        this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
        this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
    },

---

2.方式二 通过check-change函数，当节点发生变化时，修改数据

代码如下（示例）：

	handleClickChange(data, check, childCheck) {
      	if (check) {
       	 	this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
      	}
	},

3.回调函数传参

当我们需要在回调函数里面传入参数时，我们可以使用$event 事件

 	@check="handleClick($event,1)"

但是这个$event 事件只取到了回调函数返回的第一个参数，我们需要多个参数时可使用...扩展，会将回调函数的参数放在一个数组中

	@check-change=" (...event)=>{handleClick(event,1)}"

---

三.样式修改

	.treeRadio >>> .el-checkbox__inner{
      	border-radius: 50%;
    }

---

总结

学海无涯！！！