el-select 列表全选多选

<template>
  <div>
    <el-select
      multiple
      placeholder="请选择"
      v-model="value"
      @change="change"
      collapse-tags
    >
      <el-option key="全选" label="全选" value="全选"> </el-option>

      <el-option
        v-for="(item, key) in list"
        :key="key"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>


<script>
export default {
  data() {
    return {
      value: [],
      list: [
        // { id: 1, name: "全部" },
        // { name: "未生效" },
        // { name: "已生效" },
        // { name: "生效中" },
        "未生效",
        "已生效",
        "生效中",
      ],
      all: false,
    };
  },
  methods: {
    change(val) {
      if (this.all) {
        this.all = false;
        if (val.indexOf("全选") > -1) {
          this.value = val.filter((p) => p != "全选");
        } else {
          this.value = [];
        }
      } else {
        if (val.indexOf("全选") > -1) {
          this.value = ["全选", ...this.list];
          this.all = true;
        } else {
          if (val.length === this.list.length) {
            this.value = ["全选", ...this.list];
            this.all = true;
          } else {
            this.value = val;
          }
        }
      }
      console.log(this.value);
    },
  },
};
</script>