ElementUI之el-table前端分页、自定义序号、排列问题

1、前端分页：

html：

<el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"> 
<!-- 对数据请求的处理，最为重要的一句话 -->
    <el-table-column></el-table-column>
     ...
    <el-table-column></el-table-column>
</el-table>

<el-pagination @size-change="handleSizeChange" 
               @current-change="handleCurrentChange" 
               :current-page="currentPage" 
               :page-sizes="pageSizes" 
               :page-size="PageSize" 
               layout="total, sizes, prev, pager, next, jumper" 
               :total="totalCount">
</el-pagination>

js（伪代码）：

export default {
   data(){
       return {
            // 总数据
           tableData:[],
           // 默认显示第几页
           currentPage:1,
           // 总条数，根据接口获取数据长度(注意：这里不能为空)
           totalCount:1,
           // 个数选择器（可修改）
           pageSizes:[1,2,3,4],
           // 默认每页显示的条数（可修改）
           PageSize:1,
       }
   },
 methods:{
       // 分页
        // 每页显示的条数
       handleSizeChange(val) {
           // 改变每页显示的条数 
           this.PageSize=val
           // 注意：在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
       },
   }
}

2、前端自定义递增序号

html：

<el-table-column label="序号" prop="" align="center">
  <template slot-scope="scope">
    <span v-text="getIndex(scope.$index)"> </span>
  </template>
</el-table-column>

js：

//获取表格序号
getIndex($index) {
  return (this.currentPage - 1) * this.pageSize + $index + 1
},

3、默认按照时间倒序排列表格

<!-- 设置:default-sort属性，默认时间倒序 -->
<el-table
   :data="tableData"
   :default-sort = "{prop: 'date', order: 'descending'}"
></el-table>