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