element的Table组件可以很方便的展示对象数组数据,但是实际应用场景中的数组往往很长、不方便一口气全部展示出来。这时就需要同时使用Table和Pagination组件一起进行数据表的分页展示。
分页操作可以直接在后端拿取数据时进行、而且这样效率更高。但有些情况下就需要在前端组件里自己分页、比如:后端拿到的数据是二维数组、而要展示的数据表是里面那层。
本文介绍的例子是前端自己拿全部数据情况下的分页方法,后端分页时直接删去多余代码即可。
原创示例情景:数据为长度不定的对象数组,key为name、status;status需要根据值显示不同颜色。期望以每页5个的表格形式展示,要求表格写成一个数据自定义的vue组件。
表格组件 myTable.vue:
<template>
<div>
<el-table :data="showPage"
tooltip-effect="light"
border>
<el-table-column show-overflow-tooltip label="名称" min-width="40%"
prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="状态" min-width="60%">
<template slot-scope="scope">
<span :style="{
color:getColor(scope.row)}">{
{scope.row.status}}</span>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@current-change