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

Vue表格筛选实践：数据过滤与状态管理

最新推荐文章于 2025-07-23 13:50:10 发布

究极死胖兽

最新推荐文章于 2025-07-23 13:50:10 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js node.js Web编程实战文章标签： Vue.js node.js Element javascript html

本文链接：https://blog.youkuaiyun.com/sps900608/article/details/79832348

本文介绍如何在Vue项目中实现全面的表格数据筛选功能，涵盖学习计划状态、完成时间及搜索框过滤。使用的技术栈包括Vue.js、Vuex、vue-router、axios、Element UI和mongodb。通过绑定过滤条件、美化界面并优化计算属性，最终实现高效的多条件筛选体验。

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]">

最低0.47元/天解锁文章

200万优质内容无限畅学