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

Posted 2022-12-09 究极死胖兽

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
    
,

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

<el-table-column label="学习书籍" prop="name" sortable="custom"></el-table-column>
//...
<el-table-column label="学习计划状态" prop="status" sortable="custom">
    <template slot-scope="scope">
        <el-tag :type="statusColors[scope.row.status]">statuses[scope.row.status]</el-tag>
    </template>
</el-table-column>
<el-table-column label="学习完成时间" prop="completeDate" sortable="custom">
    <template slot-scope="scope">
        new Date(scope.row.completeDate).toLocaleDateString()
    </template>
</el-table-column>

添加计算属性sortedData实现排序

computed: 
    filtedData() 
        //...
    ,
    sortedData() 
        if (!this.sortOrder || !this.sortProp || !this.filtedData || !this.filtedData.length) return this.filtedData
        var reverse = this.sortOrder == 'descending' ? -1 : 1
        switch (typeof this.filtedData[0][this.sortProp]) 
            case 'number':
                return this.filtedData.sort((a, b) => 
                    return reverse * (a[this.sortProp] - b[this.sortProp])
                )
            case 'string':
                if (JSON.stringify(new Date(this.filtedData[0][this.sortProp])) !== 'null') 
                    return this.filtedData.sort((a, b) => 
                        return reverse * (new Date(a[this.sortProp]) - new Date(b[this.sortProp]))
                    )
                 else 
                    return this.filtedData.sort((a, b) => 
                        var cmp = 0
                        if (a[this.sortProp] > b[this.sortProp]) cmp = 1
                        else if (a[this.sortProp] < b[this.sortProp]) cmp = -1
                        return reverse * cmp
                    )
                
        
    

排序效果如下

表格分页

创建分页工具条，需要设置的属性较多，依次为数据总条数，当前页，每页显示条数，可选择的每页显示条数，显示内容，每页显示条数改变事件，当前页改变事件

<el-pagination :total="total" :current-page="currentPage" 
         :page-size="currentPageSize" :page-sizes="[3, 5]"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChange" @current-change="pageChange">
</el-pagination>

表格数据源修改为计算属性pagedData

<el-table :data="pagedData" @sort-change="sortChange">
//...
</el-table>

新增当前页和每页显示条数属性和其变化时的事件方法

data() 
    return 
        //...
        currentPage: 1,
        currentPageSize: 3
    
,
methods: 
    //...
    pageSizeChange(size) 
        this.currentPageSize = size
    ,
    pageChange(page) 
        this.currentPage = page
    
,

新增计算属性

computed: 
    //...
    total() 
        return this.filtedData.length
    ,
    pagedData() 
        return this.sortedData.slice((this.currentPage - 1) * this.currentPageSize, this.currentPage * this.currentPageSize)
    

分页效果如下

小结

目前已经实现了数据“增删改查”中的查询功能，下个阶段将实现新增数据的功能