vue—element-ui中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(); }

总结：

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

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

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