From aa00c07eb085df2cb1fc0c17e7ae895028d41573 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Sat, 14 Jun 2025 21:31:02 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=2011-=E5=88=97=E8=A1=A8=E8=BF=87?= =?UTF-8?q?=E6=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue2-tutorials/import-script/11-列表过滤.html | 58 ++++++ vue2-tutorials/import-script/11-列表过滤.md | 168 ++++++++++++++++++ 2 files changed, 226 insertions(+) create mode 100644 vue2-tutorials/import-script/11-列表过滤.html create mode 100644 vue2-tutorials/import-script/11-列表过滤.md diff --git a/vue2-tutorials/import-script/11-列表过滤.html b/vue2-tutorials/import-script/11-列表过滤.html new file mode 100644 index 0000000..ac29dcf --- /dev/null +++ b/vue2-tutorials/import-script/11-列表过滤.html @@ -0,0 +1,58 @@ + + + + + + + 列表过滤 + + + +
+

列表过滤

+ + + + + + +
+ + + + diff --git a/vue2-tutorials/import-script/11-列表过滤.md b/vue2-tutorials/import-script/11-列表过滤.md new file mode 100644 index 0000000..c6e1697 --- /dev/null +++ b/vue2-tutorials/import-script/11-列表过滤.md @@ -0,0 +1,168 @@ +# Vue2 列表过滤与排序综合文档 + +## 一、功能概述 + +本示例展示了 Vue2 中如何实现列表的实时过滤与动态排序功能，结合计算属性实现了高效的数据处理。 + +## 二、代码实现解析 + +```html +
+

列表过滤

+ + + + + + + + + +
+ + +``` + +## 三、核心机制详解 + +### 1. 数据流设计 +``` +原始数据 (list) + ↓ +[过滤] → 根据 keyword 筛选 + ↓ +[排序] → 根据 sortType 排序 (可选) + ↓ +渲染列表 (filterPersion) +``` + +### 2. 计算属性优势 +- **自动缓存**：依赖项未变化时不重新计算 +- **响应式**：keyword 或 sortType 变化自动更新 +- **声明式**：模板保持简洁，逻辑集中管理 + +### 3. 排序算法优化 +```javascript +// 三元运算符实现升降序切换 +(a, b) => this.sortType === 2 ? a.age - b.age : b.age - a.age +``` + +## 四、最佳实践建议 + +### 1. 性能优化 +- **避免深拷贝**：直接操作过滤后的数组 +- **防抖处理**：搜索框添加防抖（使用 lodash.debounce） +- **分页加载**：大数据集应配合分页 + +### 2. 代码改进 +```javascript +// 更安全的字符串包含检查 +person.name.toLowerCase().includes(this.keyword.toLowerCase()) + +// 可配置的排序函数 +const sortStrategies = { + 1: (a, b) => b.age - a.age, + 2: (a, b) => a.age - b.age +}; +newList.sort(sortStrategies[this.sortType]); +``` + +### 3. Key 的使用 +```html + +
  • +``` + +## 五、扩展功能实现 + +### 1. 多条件过滤 +```javascript +filterPersion() { + return this.list.filter(person => { + const nameMatch = person.name.includes(this.keyword); + const ageMatch = this.filterAge === '' || person.age == this.filterAge; + return nameMatch && ageMatch; + }); +} +``` + +### 2. 多列排序 +```javascript +data() { + return { + sortConfig: { field: 'age', order: 1 } // 1升序，-1降序 + } +}, +computed: { + sortedList() { + return [...this.filteredList].sort((a, b) => { + return a[this.sortConfig.field] > b[this.sortConfig.field] + ? this.sortConfig.order : -this.sortConfig.order; + }); + } +} +``` + +### 3. 异步数据加载 +```javascript +async loadData() { + this.list = await fetch('/api/persons').then(res => res.json()); +} +``` + +## 六、常见问题解决方案 + +1. **列表不更新问题** + - 确保使用变异方法修改原始数组 + - 或使用 `Vue.set` 更新数组元素 + +2. **排序状态保持** + ```javascript + created() { + this.sortType = Number(localStorage.getItem('sortType')) || 0; + }, + watch: { + sortType(newVal) { + localStorage.setItem('sortType', newVal); + } + } + ``` + +3. **空搜索结果处理** + ```html +
    暂无匹配结果
    + ```