el-select无法手动触发全选（用option是不是真的就无解？）

Question

`

<el-form-item label="考试">
          <el-select
            v-model="form.exam"
            placeholder="请选择考试"
            multiple
            ref="exam"
            collapse-tags
            clearable
            @change="changeExam"
          >
            <el-option label="全选" value="全选" @click.native="selectAll(form.exam,exam)"></el-option>
            <!-- <el-checkbox v-model="checked" @change='selectAll(form.exam,exam)'>全选</el-checkbox> -->
            <el-option v-for="item in exam" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

`
`

 selectAll(selectedArray, options) {
    if (selectedArray.length < options.length) {
      options.map((item) => {
        selectedArray.push(item.id);
      });
      selectedArray.unshift("全选");
      console.log(222,selectedArray)
    } else {
      selectedArray.splice(0, selectedArray.length);
    }
  },
  // 考试筛选年份
  changeExam(val) {
    console.log(12, val);
    this.form.year = "";
    this.form.season = "";
    this.form.paper = "";
    this.form.type = "";
    this.form.groupId = "";
    let data = [];
    data = val;
    console.log(34, this.form.exam);
    if (!val.includes("全选") && val.length === this.exam.length) {
      this.form.exam.unshift("全选");
      data = [];
    } else if (val.includes("全选")) {
      this.form.exam = this.form.exam.filter((item) => {
        return item !== "全选";
      });
      this.exam.map((item) => {
        data.push(item.id);
      });
    }
    this.$axios.post(`/api/tabYear/getYearByExam.json`, data).then((res) => {
      if (res.success) {
        this.year = res.result;
      } else {
        this.$message.error(res.message);
      }
    });
  },

`
用以上方法实现 全选 + 取消全选 有一个问题 就是

当用户用 选中每一个选项去选中从而达到全选的效果时候，调取参数的是data 永远是[] 是因为 走了 取消全选的方法 但是又不知道该如何判断 陷入死结

如果用checkbox的话 选中checkbox又没有办法触发select change事件

求指导，该如何用这个方法实现 手动全选的效果呢

Answer 1

不需要用两个option，一个就可以搞定

 <el-select
    v-model="form.exam"
    placeholder="请选择考试"
    multiple
    ref="exam"
    collapse-tags
    clearable
    @change="changeExam"
  >
    <el-option
        v-for="item in examOptions"
        :key="item.key"
        :label="item.label"
        :value="item.key">
    </el-option>
</el-select>
    
computed: {
    examOptions() {
        let arr = this.divisionList.map(item => {
            return {
                label: item,
                key: item
            };
        });
        arr.unshift({
            label: '全选',
            key: 'all'
        });
        return arr;
    }
},
methods: {
    handleMultiSelect(values) {
        let allKey = 'all';
        let len = values.length - 1;
        if (values[len] === allKey) {
            // 使用变异方法可以检测到原始数组的变动，触发视图渲染
            values.splice(0, len);
        } else {
            let allIndex = values.indexOf(allKey);
            if (allIndex > -1) {
                values.splice(allIndex, 1);
            }
        }
    }
}