el-select选择器实现全选功能

效果图如下：
① 全选：

② 部分选：

具体代码如下：
（1）html部分：

  <el-col :span="24">
    <el-form-item label="班组人员：" prop="selectedArray">
       <el-select v-model="selectedArray" class="select-container" multiple collapse-tags placeholder="请选择" @change="changeSelect">
          <div class="select-header">
             <el-checkbox v-model="checked" @change="selectAll" />
             <span class="checkAll">全选</span>
           </div>
            <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.name">
            	<template class="custom-option">
                	<i class="el-icon-user-solid" />
                    <span class="option-name">{{ item.name }}</span>
                    <span class="option-phone">{{ item.phoneNumber }}</span>
                </template>
            </el-option>
        </el-select>
    </el-form-item>
 </el-col>

（2）js部分：

export default {
  data() {
    return {
      checked: false,
      selectedArray: [],
      options: [
        {
          name: "韩雪",
          phoneNumber: "17320608752",
          label: "1",
        },
        {
          name: "胡胜",
          phoneNumber: "19136504755",
          label: "2",
        },
        {
          name: "胡毓",
          phoneNumber: "15189422332",
          label: "3",
        },
        {
          name: "禹娴",
          phoneNumber: "18857989363",
          label: "4",
        },
        {
          name: "杜宁悦",
          phoneNumber: "15986948968",
          label: "5",
        },
      ],
    };
  },
  methods: {
    selectAll() {
      this.selectedArray = [];
      if (this.checked) {
        this.options.map((item) => {
          this.selectedArray.push(item.name);
        });
      } else {
        this.selectedArray = [];
      }
    },
    changeSelect(val) {
      if (val.length === this.options.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
};

（3）css部分：样式可以根据自己的需求进行设置

::v-deep {
 .el-select {
    width: 100%;
  }
  .el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #e6e8eb;
  }
  .el-checkbox__input {
    margin-left: 20px;
  }
  .custom-option {
    display: flex;
    align-items: center;
  }
  .option-name {
    display: inline-block;
    width: 60px;
    text-align: left;
    margin-left: 24px;
  }
  .option-phone {
    display: inline-block;
    text-align: left;
  }
  .select-container {
    display: flex;
    flex-direction: column;
  }
  .select-header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .select-header span {
    margin-left: 8px;
  }
  .checkAll {
    display: block;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    margin-left: 16px;
    margin-top: -25px;
    margin-bottom: 10px;
  }
}