el-select 全选按钮

### 如何在 Element UI `el-select` 组件中实现全选按钮功能

为了实现在 `el-select` 中添加全选按钮的功能，可以采用自定义插槽的方式，在下拉菜单顶部放置一个用于触发全选操作的选项。通过监听该选项的选择事件来更新已选择项的状态。

#### HTML 结构与逻辑处理

<template>
  <div class="select-all-container">
    <!-- 使用 scoped slot 自定义下拉列表 -->
    <el-select v-model="selectedItems" multiple placeholder="请选择" @visible-change="handleVisibleChange">
      <!-- 插入全选/取消全选选项 -->
      <el-option :value="'selectAll'" label="全选 / 取消全选"></el-option>

      <!-- 动态渲染实际数据项 -->
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

#### JavaScript 方法实现

<script>
export default {
  data() {
    return {
      selectedItems: [], // 存储当前被选中的项目
      allOptionsSelected: false,
      options: [
        { value: 'option1', label: '黄金糕' },
        { value: 'option2', label: '双皮奶' },
        { value: 'option3', label: '蚵仔煎' }
      ]
    };
  },

  watch: {
    selectedItems(newValue) {
      const selectAllOption = newValue.includes('selectAll');
      
      if (selectAllOption && !this.allOptionsSelected) {
        this.selectedItems = [...newValue.filter(item => item !== 'selectAll'), ...this.options.map(option => option.value)];
        this.allOptionsSelected = true;
      } else if (!selectAllOption || this.allOptionsSelected){
        this.selectedItems = newValue.filter(item => item !== 'selectAll');
        this.allOptionsSelected = false;
      }
    }
  },

  methods: {
    handleVisibleChange(visible) {
      if(!visible && this.allOptionsSelected === true){
          this.selectedItems.push('selectAll');  
      }
    }
  }
};
</script>

上述代码实现了当点击“全选 / 取消全选”的时候会自动勾选或取消所有条目，并且保持了良好的用户体验[^1]。