element-ui下拉列表新增一个选择全部的选项

Element-ui 下拉列表 新增一个选择全部的选项

代码如下：

<template>
  <div>
    <el-select v-model="value" multiple placeholder="请选择">
      <el-option label="全部" value="all"></el-option>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
  
</template>

<script>
export default {
  name: "SelectAll",
  component: {},
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: [],
    };
  },
  watch: {
    value: function (val, oldval) {
      let newIndex = val.indexOf("all");
      let oldIndex = oldval.indexOf("all"); // 获取val和oldval里all的索引,如果没有则返回 -1
      if (newIndex != -1 && oldIndex == -1 && val.length > 1)
        //如果新的选择里有勾选了选择全部, 则只勾选全部这个选项
        this.value = ["all"];
      else if (newIndex != -1 && oldIndex != -1 && val.length > 1)
        //如果操作前有勾选了选择全部且当前也选中了勾选全部且勾选数量大于1, 则移除掉勾选全部选项
        this.value.splice(val.indexOf("all"), 1);
    },
  },
  methods: {
  },
  created() {},
};
</script>

<style lang="scss" scoped>
</style>

效果如下：