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

文章目录

- - 学习计划状态过滤
  - 学习完成时间过滤
  - 搜索框过滤
  - 小结

学习计划状态过滤

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

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

<el-table-column label="学习计划状态"><template slot-scope="scope"><el-tag :type="statusColors[scope.row.status ]">{{ statuses[scope.row.status ]}}</el-tag></template>
</el-table-column>

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

<!-- 过滤条件区 -->
<template slot="filter-field"><!-- 状态过滤框 --><el-select v-model="filterType" placeholder="请选择类型"><el-option label="全部" value=""></el-option><el-option v-for="(status, index) in statuses" :key="status" :value="index"></el-option></el-select><!-- 时间过滤框 --><el-date-picker type="daterange" start-placeholder="起始时间" end-placeholder="结束时间"></el-date-picker>
</template>

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

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

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

<el-table :data="filtedData">
...
</el-table>

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

学习完成时间过滤

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

<!-- 时间过滤框 -->
<el-date-picker v-model="filterDates" type="daterange" start-placeholder="起始时间" end-placeholder="结束时间"></el-date-picker>

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) && this.filterDates[1] >= new Date(item.completeDate))})}
}

搜索框过滤

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

<!-- 搜索框 -->
<template slot="search-field"><el-input v-model="searchStr" suffix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
</template>

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) && this.filterDates[1] >= new Date(item.completeDate))})}
}