Vue小模块之功能全面的表格（四）表格数据的排序和分页

最新推荐文章于 2024-07-24 02:36:11 发布

究极死胖兽

最新推荐文章于 2024-07-24 02:36:11 发布

阅读量5.3k

点赞数 1

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

本文链接：https://blog.csdn.net/sps900608/article/details/79843965

版权

本文介绍了在Vue项目中如何实现表格数据的排序和分页功能。技术栈包括Vue.js、Vuex、vue-router、axios、Element UI等。详细讲解了通过监听事件和自定义排序方法进行数据排序，以及创建分页工具条并设置相关属性以实现分页展示。最后，文章总结了已实现的查询功能，并预告了接下来的新功能开发：新增数据。

摘要由CSDN通过智能技术生成

Vue小模块之功能全面的表格（四）表格数据的排序和分页

技术栈

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

数据排序

为表格设置排序情况变化的监听事件，修改表格数据源为排序后的数据

<!-- 表格区 -->
<el-table :data="sortedData" @sort-change="sortChange">
//...
</el-table>

data() {
    return {
        //...
        sortProp: '',
        sortOrder: ''
    }
},
methods: {
    //...
    sortChange(column) {
        this.sortProp = column.prop
        this.sortOrder = column.order
    }
},

为排序的列设置排序方法为自定义（由于后续需要分页，必须设置为自定义）