Element UI Checkbox 多选框 选择一项关闭所有项功能

addCheck(val, data, list) {
    if (!val.length) {
        return false
    }

    const rulesWithCleanOther = data.filter(e => e.rule?.clean_other === 1);
    const firstRuleId = rulesWithCleanOther[0]?.id;

    const filteredVals = val.filter(e => {
        return rulesWithCleanOther.length > 0 ? e !== firstRuleId : e
    });

    const isRuleIdInVals = val.some(e => e === firstRuleId);

    if (val[val.length - 1] === firstRuleId) {
        list.values = [firstRuleId];

        data.forEach(item => {
            item.fillingShow = val[0] === item.id;
        });

        return false
    }

    if (val.length === 2 && isRuleIdInVals) {
        list.values = [...filteredVals];
    } else if (isRuleIdInVals) {
        list.values = [firstRuleId];
    }
},

代码分析： 该addCheck函数接收三个参数：val（应该是一个数组），data（一个包含对象的数组，其中的对象拥有某些属性如 rule 和 id），和 list（一个对象，拥有 values 和 fillingShow 属性）。 下面进行逐行分析： 1. 我们首先检查 val 是否存在元素，如果没有元素(长度为0)，则函数返回 false。 2. 之后，通过过滤 data，创建了一个新数组 rulesWithCleanOther，它包含 data 中所有 rule 对象的 clean_other 属性等于1的项目。 3. 取出 rulesWithCleanOther 数组的第一个元素的 id 属性作为 firstRuleId。 4. 创建了 filteredVals 数组，其中包含了 val 数组中不等于 firstRuleId 的元素，如果 rulesWithCleanOther数组长度为0，filteredVals 则为 val 的所有元素。 5. 检查 val 数组中是否存在元素其值等于 firstRuleId，如果存在则 isRuleIdInVals 的值为 true。 6. 如果 val 的最后一个元素的值等于 firstRuleId，那么将 list.values 设为只包含 firstRuleId 的数组，并且遍历 data，对于 val 的第一个元素对应的项目，将其 fillingShow 属性设置为 true，其余项目 fillingShow 设置为 false，然后函数返回 false。 7. 接着，如果 val 的长度等于2并且 isRuleIdInVals 为 true，那么将 list.values 设置为 filteredVals 的一个拷贝。 8. 否则，如果 isRuleIdInVals 为 true， list.values 就被设置为只包含 firstRuleId 的数组。 整个函数大概在处理一个交互或可视的数据状态更新：当选取特定的项目（其 clean_other 属性为1的）时，更新列表中的值和显示属性。

修改对应的参数即可