vue3 arco design select多选模式下 增加全选功能 下拉选项点击全选 勾选所有下拉数据 select的label框只展示全选 如若不是全选 则正常展示多选内容

在 Vue3 中，Arco Design 的 Select 组件在多选模式下添加全选功能通常是通过处理组件的 `v-model` 和 `options` 属性来实现的。首先，你需要确保你的 `options` 数据结构支持复选标记，例如：

[
  {
    value: 'option1',
    label: 'Option 1',
    disabled: false,
    checked: false // 默认未勾选
  },
  { ... } // 其他选项
]

当需要增加全选功能时，你可以这样做：

1. 添加一个 `selectAll` 和 `selectNone` 方法到组件的 methods 中，分别用于全选和取消全选操作：

   methods: {
     toggleAllSelection() {
       this.options.forEach(option => {
         option.checked = !option.checked;
       });
     },
     resetSelection() {
       this.options.forEach(option => {
         option.checked = false;
       });
     }
   }

2. 创建一个 computed 属性来判断是否全部选中：

   computed: {
     isAllSelected() {
       return this.options.every(option => option.checked);
     }
   }

3. 更新模板，添加全选按钮以及根据当前状态显示适当的 label。比如：

   <template>
     <arco-select v-model="selectedValues" :options="options" @change="handleChange">
       <el-option
         v-for="(option, index) in options"
         :key="index"
         :label="isAllSelected ? '全选' : (option.label + (option.checked ? '*' : ''))"
         :value="option.value"
         :disabled="option.disabled"
       ></el-option>
       <el-button type="primary" @click="toggleAllSelection" :disabled="!isAllSelected">全选</el-button>
       <el-button @click="resetSelection" :disabled="isAllSelected">取消全选</el-button>
     </arco-select>
   </template>

4. 当用户点击全选按钮时，触发 `toggleAllSelection` 方法改变所有选项的状态；当单个选项选择时，`handleChange` 方法会被触发，此时可以根据选项变化调整全选按钮的显示。