el-select 多选增加全部选项

背景

使用el-select配置多选时，往往需要自己添加全选子项。

实现

1. 全选、取消全选、选择其他子项的逻辑

   // 列表展示的模块
   let oldConlumns =['A','B','C','all']
   const filteredColumns = ref<string[]>(['A','B','C','all',
   ])
   const showTableValues = ref<string[]>(['A','B','C','all'])function isShowColumn(column:string) {return showTableValues.value.includes(column)
   }// 增加全部的联动操作
   function showColumnsChange(value) {// 找出新勾选的项const added = value.find(v => !oldConlumns.includes(v))const removed = oldConlumns.find(v => !value.includes(v))if (added === 'all') {console.log('刚勾选的是 ALL')// 执行全选逻辑filteredColumns.value = [...defaultTableItems.map(o => o.value)]} else if (removed === 'all') {console.log('刚取消了 ALL')filteredColumns.value = []} else {// 普通选项变化const allValues = defaultTableItems.map(o => o.value).filter(v => v!=='all')const hasAllSelected = allValues.every(v => value.includes(v))if (hasAllSelected && !value.includes('all')) {// 补上 ALLfilteredColumns.value = [...defaultTableItems.map(o => o.value)]}if (!hasAllSelected && value.includes('all')) {// 取消了部分选项，需要去掉 ALLfilteredColumns.value = value.filter(v => v !== 'all')}}// 更新旧值oldConlumns = [...filteredColumns.value]
   }
   

2. 页面中使用el-select

   <el-selectv-model="filteredColumns"multiplecollapse-tagscollapse-tags-tooltip:max-collapse-tags="3"placeholder="请选择"style="width: 240px"@change="showColumnsChange"><el-optionv-for="item in defaultTableItems":key="item.value":label="item.label":value="item.value"/></el-select>