Element-UI的Select组件实现全选功能

比较简洁的方式

<el-select v-model="values" multiple placeholder="请选择">
    <li
      class="el-select-dropdown__item"
      :class="{ selected: allSelected }"
      @click="selectAll"
    >
      <span>全选</span>
    </li>
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>

export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "黄金糕"
        },
        {
          value: "2",
          label: "双皮奶"
        },
        {
          value: "3",
          label: "蚵仔煎"
        },
        {
          value: "4",
          label: "龙须面"
        },
        {
          value: "5",
          label: "北京烤鸭"
        }
      ],
      values: ["1", "3"],
    };
  },
  computed: {
    allSelected() {
      return this.options.length === this.values.length
    }
  },
  methods: {
    selectAll() {
      this.values = !this.allSelected ? this.options.map(e => e.value) : []
    }
  }
}

Element-UI的Select组件结合CheckBox实现全选

点击 checkbox 选中状态变化，分两种情况

1、点击 checkbox 勾选上，表示全选，选中全部select选项（checked值为true，设置indeterminate值为false）

2、点击 checkbox 取消勾选，表示取消所有选择，无select选项选中（checked值为false，设置indeterminate值为false）

点击 select选项 选中状态变化，分三种情况

1、select选项 全选上，表示全选，勾选上checkbox（设置checked值为true，设置indeterminate值为false）

2、select选项 选上部分，表示部分选上，不勾选checkbox，设置checkbox样式状态为不确定状态（设置checked值为false，设置indeterminate值为true）

3、select选项 全不选，表示一个都不选择，勾掉checkbox（设置checked值为false，设置indeterminate值为false）

<template>
  <el-select
    v-model="value"
    multiple
    placeholder="请选择"
    @change="selectChange"
  >
    <el-checkbox
      v-model="checked"
      :indeterminate="indeterminate"
      @change="selectAll"
      class="select-checkbox"
      >全选</el-checkbox>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: [],
      checked: false, // el-checkbox 是否勾选上
      indeterminate: false, // el-checkbox 的 indeterminate 属性为true时用以表示 checkbox 的不确定状态
      options: [
        { value: "1", label: "苹果" },
        { value: "2", label: "橘子" },
        { value: "3", label: "葡萄" },
        { value: "4", label: "西瓜" },
        { value: "5", label: "芒果" },
        { value: "6", label: "山竹" },
      ],
    };
  },
  methods: {
    // checkbox勾选操作
    selectAll() {
      this.indeterminate = false;
      let selectedData = [];
      // 若勾选了全选，则选上所有数据
      if (this.checked) {
        this.options.forEach((item) => {
          selectedData.push(item.value);
        });
      }
      this.value = selectedData;
    },
    // select下拉框选中数据变化
    selectChange(val) {
      // 全选
      if (val.length === this.options.length) {
        this.checked = true;
        this.indeterminate = false;
      } else if (val.length < this.options.length && val.length > 0) {
        // 部分选择
        this.checked = false;
        this.indeterminate = true;
      } else {
        // 未选择
        this.checked = false;
        this.indeterminate = false;
      }
    },
  },
};
</script>
<style scoped>
.select-checkbox {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 6px 20px;
  border-bottom: 1px solid #eee;
}
</style>