Vue小模块之功能全面的表格筛选表格中的数据

Posted 2022-12-10 究极死胖兽

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

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

学习计划状态过滤

暂时修改测试数据的status列以便于测试

接下来对学习计划状态列进行美化

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>

为下拉选择框添加选项

<!-- 过滤条件区 -->
<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" :label="status" :value="index"></el-option>
    </el-select>
    <!-- 时间过滤框 -->
    <el-date-picker type="daterange" start-placeholder="起始时间" end-placeholder="结束时间"></el-date-picker>
</template>

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

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

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

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

效果如下：
、

学习完成时间过滤

将时间过滤框的值与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']
    
,

修改计算属性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))
        )
    

搜索框过滤

将搜索框的值与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']
    
,

修改计算属性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))
        )
    

现在可以通过输入书籍的名字和作者来进行过滤筛选

小结

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