企业官网建设流程全解析

1. Vue2列表筛选功能实现全解析

在Vue2项目开发中，列表数据展示与筛选是最基础也最常用的功能组合。我见过不少新手开发者虽然能实现基本功能，但在性能优化和用户体验方面往往存在缺陷。今天我们就来深度剖析如何用Vue2实现一个带筛选功能的列表组件，这里面至少有5个关键点需要特别注意。

2. 核心实现方案

2.1 基础数据结构设计

首先我们需要明确数据层的设计。对于列表筛选功能，建议采用以下数据结构：

data() { return { originalList: [ { id: 1, name: '张三', department: '研发部' }, { id: 2, name: '李四', department: '市场部' }, // ...更多数据 ], filterText: '', filterField: 'name' // 默认按姓名筛选 } }

这种设计将原始数据与筛选条件分离，有三大优势：

1. 保留原始数据副本，避免筛选操作污染源数据
2. 支持多字段筛选的扩展
3. 便于重置筛选状态

2.2 计算属性的正确使用

筛选功能的核心在于计算属性的运用。很多开发者容易犯的两个错误是：

• 在methods中实现筛选导致不必要的重复计算
• 直接在模板中使用复杂逻辑影响可读性

正确的做法应该是：

computed: { filteredList() { const keyword = this.filterText.toLowerCase() return this.originalList.filter(item => String(item[this.filterField]).toLowerCase().includes(keyword) ) } }

这里特别要注意：

1. 统一转为小写比较实现不区分大小写
2. 将字段值显式转为String避免数字类型报错
3. 使用includes而非indexOf更语义化

3. 性能优化要点

3.1 防抖处理

为筛选输入框添加防抖是必备的优化手段：

methods: { handleInput: _.debounce(function(e) { this.filterText = e.target.value }, 300) }

建议使用lodash的debounce方法，注意：

• 300ms延迟是平衡响应与性能的推荐值
• 需要在beforeDestroy中调用cancel方法清除定时器
• 移动端可以考虑延长到500ms

3.2 虚拟滚动优化

当列表数据超过100条时，应该引入虚拟滚动：

<virtual-list :size="50" :remain="10"> <div v-for="item in filteredList" :key="item.id"> {{ item.name }} </div> </virtual-list>

关键参数说明：

• size: 每项预估高度(px)
• remain: 可见区域保留项数
• 需要为每项设置固定高度或使用动态尺寸插件

4. 完整组件实现

4.1 模板结构

<div class="list-container"> <div class="filter-controls"> <select v-model="filterField"> <option value="name">姓名</option> <option value="department">部门</option> </select> <input v-model="filterText" @input="handleInput" placeholder="输入筛选关键词" /> </div> <ul v-if="filteredList.length"> <li v-for="item in filteredList" :key="item.id"> <span>{{ item.name }}</span> <span class="dept">{{ item.department }}</span> </li> </ul> <div v-else class="empty-tip"> 没有匹配的结果 </div> </div>

4.2 样式优化建议

.filter-controls { display: flex; margin-bottom: 15px; } .filter-controls select { margin-right: 10px; } .empty-tip { color: #999; padding: 20px; text-align: center; }

5. 常见问题解决方案

5.1 中文拼音筛选

实现中文拼音筛选需要引入pinyin库：

import pinyin from 'pinyin' computed: { filteredList() { return this.originalList.filter(item => { const text = this.filterText.toLowerCase() const namePinyin = pinyin(item.name, { style: pinyin.STYLE_NORMAL }).join('') return ( item.name.includes(text) || namePinyin.includes(text) ) }) } }

5.2 多条件复合筛选

对于AND关系的多条件筛选：

computed: { filteredList() { const filters = { name: this.nameFilter, department: this.deptFilter } return this.originalList.filter(item => { return Object.entries(filters).every(([key, value]) => { if (!value) return true return String(item[key]).includes(value) }) }) } }

6. 高级功能扩展

6.1 远程筛选实现

当数据量过大时，应该改为后端筛选：

methods: { async fetchFilteredData() { const res = await axios.get('/api/users', { params: { keyword: this.filterText, field: this.filterField } }) this.displayList = res.data } }

注意事项：

1. 需要添加loading状态
2. 建议配合防抖使用
3. 错误处理必不可少

6.2 筛选历史记录

data() { return { searchHistory: [] } }, methods: { handleSearch() { if (this.filterText) { this.searchHistory.unshift({ text: this.filterText, field: this.filterField, time: new Date() }) // 保持最近5条记录 this.searchHistory = this.searchHistory.slice(0, 5) } } }

7. 单元测试要点

对于筛选功能的测试应该覆盖：

describe('列表筛选功能', () => { it('应该能按姓名筛选', () => { wrapper.setData({ filterField: 'name', filterText: '张' }) expect(wrapper.vm.filteredList.length).toBe(1) }) it('空关键词应返回全部数据', () => { wrapper.setData({ filterText: '' }) expect(wrapper.vm.filteredList.length).toBe(wrapper.vm.originalList.length) }) it('不存在的筛选应返回空数组', () => { wrapper.setData({ filterText: '不存在的名字' }) expect(wrapper.vm.filteredList.length).toBe(0) }) })

8. 性能监控方案

建议添加性能打点：

computed: { filteredList() { const start = performance.now() // ...筛选逻辑 const duration = performance.now() - start if (duration > 50) { console.warn(`筛选耗时 ${duration}ms，建议优化`) } return result } }

对于超大数据量(>10000条)的情况，应该：

1. 采用Web Worker进行后台筛选
2. 实现分页加载
3. 考虑使用IndexedDB进行本地存储

9. 可访问性优化

<input aria-label="列表筛选输入框" aria-describedby="filterHelp" /> <div id="filterHelp" class="sr-only"> 输入关键词后列表将实时筛选 </div> <ul role="list"> <li v-for="(item, index) in filteredList" :key="item.id" :aria-setsize="filteredList.length" :aria-posinset="index + 1" > {{ item.name }} </li> </ul>

.sr-only样式可以让提示信息只对屏幕阅读器可见。

10. 移动端适配技巧

在移动端需要特别注意：

1. 输入框添加inputmode="search"属性
2. 考虑使用搜索按钮代替实时筛选
3. 为虚拟键盘添加"搜索"操作类型

<input type="search" enterkeyhint="search" @keyup.enter="handleSearch" >

这些细节可以显著提升移动端用户体验。