element ui el-checkbox-group 添加校验并且解决 点一个 全部选中

要为element ui的el-checkbox-group添加校验，可以通过在父组件中监听子组件的change事件，然后在事件处理函数中对选中的checkbox进行判断。如果没有选中任何一个checkbox，就提示用户进行选择。

以下是一个示例代码：

<template>
  <div>
    <el-checkbox-group v-model="checkedList" @change="handleCheckboxChange">
      <el-checkbox label="选项1"></el-checkbox>
      <el-checkbox label="选项2"></el-checkbox>
      <el-checkbox label="选项3"></el-checkbox>
    </el-checkbox-group>
    <div v-if="!checkedList.length" style="color:red">请至少选择一个选项</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []
    };
  },
  methods: {
    handleCheckboxChange(val) {
      this.checkedList = val;
    }
  }
};
</script>

要解决“点一个 全部选中”的问题，可以通过在子组件的change事件处理函数中，判断当前checkbox是否是已选中的最后一个，如果是则将所有的checkbox都选中。以下是一个示例代码：

<template>
  <el-checkbox v-model="checked" @change="handleCheckboxChange">{{label}}</el-checkbox>
</template>

<script>
export default {
  props: {
    label: String
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    handleCheckboxChange(val) {
      if (val && this.checked) {
        // 如果当前checkbox已选中，且是已选中的最后一个，则将所有的checkbox都选中
        const checkboxGroup = this.$parent.$children.find(
          item => item.$options.name === "ElCheckboxGroup"
        );
        if (checkboxGroup && checkboxGroup.checked.length === checkboxGroup.$children.length - 1) {
          checkboxGroup.checked = checkboxGroup.$children.map(item => item.label);
        }
      }
    }
  }
};
</script>

在父组件中使用自定义的el-checkbox组件即可，如下所示：

<template>
  <div>
    <el-checkbox-group>
      <custom-checkbox label="选项1"></custom-checkbox>
      <custom-checkbox label="选项2"></custom-checkbox>
      <custom-checkbox label="选项3"></custom-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import CustomCheckbox from "@/components/CustomCheckbox";

export default {
  components: {
    CustomCheckbox
  }
};
</script>