vue---el-select下拉框实现全选功能

问题描述：

el-select下拉框要求实现全选功能。具体功能包括：

• 当选择【全选】时，所有选项全部被勾选；
• 当下拉选项（除了【全选】）都选择时，【全选】自动勾选；
• 当所有选项全部被勾选，取消某一项选项（除了【全选】），【全选】自动取消勾选；
• 点击【全选】tag标签，可取消所有勾选项。

如下图：

解决方法：

1、给el-select增加【全选】下拉选项

2、为el-select绑定change事件和remove-tag事件，具体实现全选功能写在事件中

注意：代码中，需要加上【this.value = val;】，确保el-select绑定的value值和val一致，当然也可以直接在change事件中使用【this.value】替代【val】,总之【this.value】才是我们后续需要使用的值，我开始一直以为【this.value】和【val】是时刻一致的，然而并不是。观察控制台打印值即可知：

<template>
  <div class="allselect">
    <el-select
      v-model="value"
      size="small"
      multiple
      collapse-tags
      @change="changeSelect"
      @remove-tag="removeTag"
    >
      <el-option label="全选" value="全选"></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 {
  data() {
    return {
      value: [],
      options: [
        { label: "房子", value: 1 },
        { label: "车子", value: 2 },
        { label: "票子", value: 3 }
      ]
    };
  },
  methods: {
    // 多选模式下移除tag时触发,val为移除的tag值
    removeTag(val) {
      if (val === "全选") {
        this.value = [];
      }
      console.log("removeTag===", this.value, val);
    },
    // el-select 选中值发生变化时触发，val为目前选中的值
    changeSelect(val) {
      var end = val[val.length - 1];
      console.log("111===", this.value, val);
      if (!val.includes("全选") && val.length === this.options.length) {
        val.unshift("全选");
        console.log("222===", this.value, val);
      } else if (val.includes("全选") && val.length == 1) {
        this.options.map(item => {
          val.push(item.value);
        });
        console.log("333===", this.value, val);
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options.length &&
        end == "全选"
      ) {
        val = [];
        this.options.map(item => {
          val.push(item.value);
        });
        val.unshift("全选");
        // this.value = val;
        console.log("444===", this.value, val);
      } else if (val.includes("全选") && val.length - 1 < this.options.length) {
        val = val.filter(item => {
          return item !== "全选";
        });
        // this.value = val;
        console.log("555===", this.value, val);
      }
      // 注意，加上  this.value = val，确保勾选值同步
      this.value = val;
      console.log("666===", this.value, val);
    }
  }
};
</script>
<style lang="less">
.allselect {
  margin: 20px;
}
</style>

在其他方案中：见https://www.jb51.net/article/166809.htm 在【全选】选项上，加上click事件后，click事件和change事件有冲突，是的绑定值的值不一致，不便于在change事件中进行后续操作，比如说向后台发送数据请求。