Vue之功能全面的表格（三）筛选表格中的数据

2024-07-04 23:48| 来源: 网络整理| 查看: 265

文章目录学习计划状态过滤学习完成时间过滤搜索框过滤小结

学习计划状态过滤

1、对学习计划状态列进行美化

data () { return { data: [], filterType: '', statuses: ['未开始', '进行中', '搁置', '完成'], // 修改 statusColors: ['info', 'primary', 'warning', 'success'] // 新增 } } {{ statuses[scope.row.status ]}}

2、为下拉选择框添加选项

3、为组件添加计算属性实现过滤

import ViewPage from './ViewPage' export default { ... computed: { filtedData () { return this.data.filter((item) => { return this.filterType === '' || item.status === this.filterType }) } } }

4、最后将表格数据源修改为过滤后的数据

...

5、效果如下：在这里插入图片描述

学习完成时间过滤

6、将时间过滤框的值与filterDates进行绑定

data () { return { data: [], filterType: '', filterDates: null, // 新增 statuses: ['未开始', '进行中', '搁置', '完成'], statusColors: ['info', 'primary', 'warning', 'success'] } }

7、修改计算属性filtedData

computed: { filtedData () { return this.data.filter((item) => { return this.filterType === '' || item.status === this.filterType }).filter((item) => { return !this.filterDates || (this.filterDates[0] = new Date(item.completeDate)) }) } } 搜索框过滤

8、将搜索框的值与searchStr进行绑定

data () { return { data: [], searchStr: '', // 新增 filterType: '', filterDates: null, statuses: ['未开始', '进行中', '搁置', '完成'], statusColors: ['info', 'primary', 'warning', 'success'] } }

9、修改计算属性filtedData,需要注意的是，最好将新增的搜索框过滤加到最前面，因为多条件过滤时，为提高性能，最好将越严格的过滤条件放到越前面。

computed: { filtedData () { return this.data.filter((item) => { var reg = new RegExp(this.searchStr, 'i') return !this.searchStr || reg.test(item.name) || reg.test(item.author.join(' ')) }).filter((item) => { return this.filterType === '' || item.status === this.filterType }).filter((item) => { return !this.filterDates || (this.filterDates[0] = new Date(item.completeDate)) }) } }

10、现在可以通过输入书籍的名字和作者来进行过滤筛选，也可以通过日期进行筛选在这里插入图片描述

小结

本阶段实现了表格的过滤筛选功能，下个阶段将实现表格数据的排序和分页

【本文地址】

公司简介

联系我们