el-tree实现多选、反选、指定选择

最近项目中遇到实现设备多选的需求，虽然这个需求很常见，但功能需求的不同，实现过程也大相径庭，我们的需求时只提供子级选择，父级不做选择，只提供层级显示；

el-tree是elementPlus的组件，熟悉的都知道这个UI库，对如传入的数据格式也是固定，对与本次需求，后端返回的数据需求做指定：

const defaultProps = {
	children: 'data',
	label: 'name',
}

el-checkbox结合el-tree实现多选功能，具体代码实现如下：

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-tree class="tree" :data="deviceLevel" :props="defaultProps" show-checkbox node-key="ids" :default-expand-all="true" check-strictly :default-checked-keys="[5, 6]" @check-change="testCheckChange" ref="testingTree" />

我们后端接收到的数据传入字符串形式，所以在选择中直接处理了；用的正则的原因是去掉出现零是我情况；

// 实现树形选择联动功能
function testCheckChange(data, checked, node) {
	queryParams.DeviceidArr = useUnique(queryParams.DeviceidArr)
	if (checked) {
		queryParams.DeviceidArr = queryParams.DeviceidArr.concat(",", data.id).replace(/,0,/g, ',').replace(/,0/g, ',').replace(/0,/g, ',')
		let arr = queryParams.DeviceidArr.split(",").map(item => Number(item)).filter(item => item !== 0);
		// 使用Set对象去重  
		let uniqueArr = [...new Set(arr)];
		if (uniqueArr.length == nodeId.value.length) {
			// 取消全选状态显示
			checkAll.value = true
		}
	} else {
		// 防止在字符串和数组之间转换出现零的情况
		let arr = queryParams.DeviceidArr.split(",").map(item => Number(item)).filter(item => item !== 0);
		let indexToRemove = arr.indexOf(data.id);

		if (indexToRemove !== -1) {
			arr.splice(indexToRemove, 1);
		}
		if (arr.length !== nodeId.value.length) {
			// 取消全选状态显示
			checkAll.value = false
		}
		queryParams.DeviceidArr = arr.join(",")
	}
}
//全选按钮勾上的方法事件
function handleCheckAllChange(params) {
	if (params) {
		allNode.value = []
		nodeId.value = []
		hierarchicalIteration(deviceLevel.value)
		testingTree.value?.setCheckedKeys(allNode.value);
		let uniqueArr = [...new Set(nodeId.value)];
		queryParams.DeviceidArr = uniqueArr.join(",")
	}
	else {
		//取消全选时置空
		testingTree.value.setCheckedKeys([])
		queryParams.DeviceidArr = ''
	}
}