elemntui select 全选

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

#### 方法一：通过增加【全选】选项来实现

可以在下拉列表的第一项加入一个特殊的 “全部” 选项，当用户点击该选项时触发特定逻辑处理函数完成所有条目的选取操作[^3]。

<template>
  <div class="demo">
    <el-select v-model="selectedItems" multiple placeholder="请选择" @change="handleChange">
      <!-- 添加全选选项 -->
      <el-option :value="'ALL'" 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>

<script setup lang="ts">
import { ref } from 'vue';

const selectedItems = ref([]);
let allOptionsSelected = false;
const options = [
  { value: 'option1', label: '黄金糕' },
  { value: 'option2', label: '双皮奶' }
];

function handleChange(value) {
  const hasAllOption = value.includes('ALL');
  
  if (hasAllOption && !allOptionsSelected) {
    // 如果选择了 "全选", 则设置已选择状态为 true 并填充所有可选项到 selectedItems 中
    allOptionsSelected = true;
    selectedItems.value = ['ALL'].concat(options.map(option => option.value));
    
  } else if (!hasAllOption && allOptionsSelected){
    // 当取消了 "全选" 后重置其他选项并更新标志位
    allOptionsSelected = false;
    selectedItems.value = [];
  }

}
</script>

#### 方法二：利用外部复选框控制全选行为

另一种方式是在 `el-select` 外部放置一个独立的复选框用于切换是否全选的状态。这种方式更直观易懂，并且可以更好地管理界面布局和交互体验[^4]。

<template>
  <div style="display:flex;align-items:center;">
    <!-- 增加一个单独的 checkbox 来表示全选 -->
    <el-checkbox v-model="selectAll">全选</el-checkbox>
    &nbsp;&nbsp;

    <el-select v-model="selectedItems" multiple filterable allow-create default-first-option placeholder="请选择标签">
      <el-option
          v-for="tag in tags"
          :key="tag.name"
          :label="tag.name"
          :value="tag.name">
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { computed, watchEffect } from 'vue';
// ...省略部分代码...

// 使用计算属性监听 selectAll 的变化情况自动调整内部数据源
const selectAll = computed({
  get() {
    return selectedTags.length === tagList.length;
  },
  set(val) {
    val ? handleCheckAll(true) : clearSelection();
  }
});

watchEffect(() => {
  // 监听 selectedTags 数组的变化同步修改 selectAll 的值
  selectAll.value = selectedTags.length === tagList.length;
});
</script>