持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

我要一步一步往上爬~大家好我是青三阿，今天我们来一起学习一下Eltable如何在Vue上实现表格+分页。

Element UI，这是为Vue而生的一个桌面端组件库。

表格使用

代码片段软下，做一下解释：

• el-table元素中的data为对象数组
• el-table-column中，prop属性对应对象中的键名
• label属性：显示在页面上的表格的列名
• width属性：定义列宽。

<template> 
    <el-table 
    :data="tableData" 
    style="width: 100%"> 
    <el-table-column 
        prop="date" 
        label="日期" 
        width="180"> 
    </el-table> 
</template>

<script> 
    export default { 
        data() { 
            return { 
            tableData: [{ 
                date: '2016-05-02', 
                name: '王小虎', 
                address: '上海市普陀区金沙江路 1518 弄' }] 
                }
            } 
        } 
</script>

此外还可以用一些属性去美化表格：

• stripe属性：创建斑马纹表格，默认为false
• border属性：开启表格数值边框，默认false
• row-class-name 属性：为某一行添加类来表明选择状态
• height属性：固定表头
• fixed属性：el-table-column中为想要固定的列设置，接受 Boolean、left``right

分页使用

代码片段软下，做一下解释：

• size-change和current-change事件:在处理页码大小和当前页变动时触发
• jumper：页面跳转

<el-pagination 
    :current-page="currentPage" 
    :page-size="[5,10,15,20]" 
    layout="total, prev, pager, next, jumper"
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" 
</el-pagination>

两者结合

• 将<el-table>中的data改成:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"，这样就关联了表格数据和分页功能
• 还要记得在methods中添加如下两个方法

handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }

最终效果如下图所示：

具体可参见官方文档

问题

但是细心点你就会发现，这智能实现当前页面的排序，不能实现整张数据表格的排序。

这是为什么呢？我猜测是设计的时候就是当两个组件来的，分页功能把表格分成了单张表格进行排序，无法全局联动。

要怎么实现全部表格数据的排序呢，这就要借助自己编写的排序函数了