el-select多选数据时，支持全选

实现效果图：

功能描述：

el-select支持多选时，在用户需要全选所有数据时需要挨个去点，操作起来过于繁琐，因此增加“全选”功能。

关键代码

<template>
  <el-select
    v-model="searchData.companyList"
    multiple
    collapse-tags
    size="mini"
    placeholder="所属公司"
    clearable
    style="width: 290px"
    @change="getCompanyList"
    @clear="clearCompanyList"
  >
    <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
    <el-option
      v-for="(item, index) in companyListArray"
      :key="index"
      :label="item.name"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      // select列表数据
      companyListArray: [
        {
          name: "XXX",
          value: "XXX",
        },
      ],
      searchData: {
        companyList: [
          // 默认勾选上时，需要默认给变量赋值
        ],
      },
      checked: true,
    };
  },
  methods: {
    // 点选数据时，判断数据都被选中时就将全选小框勾上，否则就不勾选中“全选”小框
    getCompanyList() {
      if (
        (this.searchData.companyList.length > 0) &
        (this.searchData.companyList.length === this.companyListArray.length)
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 当点击select组件清空按钮时将“全选”小框取消勾选状态
    clearCompanyList() {
      this.checked = false;
    },
    // 点击“全选”小框时，将select数据都勾选上，取消全选时将勾选中的数据变量清空
    selectAll() {
      this.searchData.companyList = [];
      if (this.checked) {
        this.companyListArray.forEach((item) => {
          this.searchData.companyList.push(item.value);
        });
      } else {
        this.searchData.companyList = [];
      }
    },
  },
};
</script>