vue+element 实现动态table

1、table表格代码 

<el-table class="mt30"  :data="depositList .slice((currentPage-1)*pageSize,currentPage*pageSize)"  stripe  style="width: 100%">
    <el-table-column  prop="enterTime"  :label="$t('message.contract.time')"></el-table-column>
    <el-table-column  prop="currency"  :label="$t('message.contract.currency')"></el-table-column>
    <el-table-column  prop="number"  :label="$t('message.contract.number')"></el-table-column>
    <el-table-column  prop="status"  :label="$t('message.contract.status')"></el-table-column>
</el-table>

 2、分页器 el-pagination的代码：

<el-pagination
    background
    layout="total,prev,pager,next,jumper"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="depositList.length"
    @current-change="handleCurrentChange">
</el-pagination>

3、 js部分

private currentPage: number = 1
private pageSize: number = 10

handleCurrentChange(val) {
    this.currentPage = val;
    this.getCurrencyList();
}
//按照接口请求列表getCurrencyList数据

总结： 

1、el-table 里面的 :data 是数据源；el-table-column 是表格里面的每一行的数据，它里面的 prop 绑定的是 :data 数据源里面的某个属性值也就是对应的name字段，由此形成一个表格。

2、current-change事件在当前页面跳转到其它页时触发；current-page 是当前所在的页码；page-size 是页面中默认显示的数据条数。

3、:data数据源使用了.slice 方法用来截取数组，它接受收两个参数，第一个是开始的索引值，第二个是结束的索引值。