vue2 el-select 下拉框去重

在 Vue 2 中使用 `el-select` 时，如果 `allSessionList` 数据中存在重复的 `date + ' ' + time` 组合，可以通过以下方法对下拉选项进行去重： --- ### **方法 1：使用计算属性过滤重复项** 通过计算属性对 `allSessionList` 进行去重处理，确保 `el-option` 不渲染重复值。 ```html <template> <el-select v-model="selectedValue" placeholder="请选择" style="width: 160px"> <el-option v-for="item in uniqueSessionList" :key="item.id" :label="item.label" :value="item.value" > {{ item.label }} </el-option> </el-select> </template> <script> export default { data() { return { selectedValue: '', allSessionList: [ { id: 1, date: '2023-01-01', time: '08:00' }, { id: 2, date: '2023-01-01', time: '08:00' }, // 重复项 { id: 3, date: '2023-01-02', time: '12:00' } ] }; }, computed: { uniqueSessionList() { const seen = new Set(); return this.allSessionList.filter(item => { const value = `${item.date} ${item.time}`; if (seen.has(value)) { return false; } seen.add(value); return true; }).map(item => ({ id: item.id, label: `${item.date} 【${item.time}】`, value: `${item.date} ${item.time}` })); } } }; </script> ``` #### **关键点** - 使用 `Set` 记录已出现的 `date + time` 组合。 - 通过 `filter` 过滤重复项，保留第一次出现的记录。 - 格式化 `label` 和 `value` 供 `el-option` 使用。 --- ### **方法 2：直接在模板中去重（不推荐）** 如果数据量较小，可以在模板中临时去重（但性能较差）： ```html <el-select v-model="selectedValue" placeholder="请选择" style="width: 160px"> <template v-for="item in allSessionList"> <el-option v-if="!seenValues.has(item.date + ' ' + item.time)" :key="item.id" :label="`${item.date} 【${item.time}】`" :value="`${item.date} ${item.time}`" > {{ item.date }} 【{{ item.time }}】 </el-option> </template> </el-select> ``` ```javascript data() { return { seenValues: new Set(), // 临时记录已出现的值 // ...其他数据 }; }, watch: { // 监听数据变化，重置 Set allSessionList() { this.seenValues = new Set(); } } ``` #### **缺点** - 每次渲染都会重新计算，性能较差。 - 需要手动管理 `seenValues` 的生命周期。 --- ### **方法 3：预处理数据（推荐）** 在获取或初始化 `allSessionList` 时，直接对数据源去重： ```javascript created() { this.allSessionList = this.deduplicateSessions(this.allSessionList); }, methods: { deduplicateSessions(list) { const map = new Map(); return list.filter(item => { const key = `${item.date}-${item.time}`; if (map.has(key)) return false; map.set(key, true); return true; }); } } ``` #### **优势** - 数据源提前去重，减少渲染时的计算量。 - 逻辑与组件解耦，更易于维护。 --- ### **注意事项** 1. **去重依据**：根据业务需求选择去重字段（如仅比较 `date` 或组合 `date + time`）。 2. **保留字段**：如果需要保留重复项的其他属性（如 `id`），需在去重后处理。 3. **性能**：大数据量时优先使用 **方法 1** 或 **方法 3**。 ---