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))
    })
  }
}

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

小结

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