**element表格手动分页,vue+element+TypeScript **
在表格控件添加属性:
:data=" tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize ) "
<el-table
class="table"
:data="
tableData.slice(
(currentPage - 1) * pagesize,
currentPage * pagesize
)
"
style="width: 100%"
v-loading="tableLoading"
:header-cell-style="{ background: '#F5F7FA', color: '#303133' }"
>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column
label="已选商品名称"
prop="goods_name"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="商品提供方"
show-overflow-tooltip
prop="discount_price"
>
</el-table-column>
<el-table-column label="操作" width="180px">
<template
slot-scope="scope"
style="display: flex; flex-direction: row"
>
<el-link
class="link"
type="danger"
:underline="false"
@click="add_delete(scope.$index, scope.row)"
>
删除
</el-link>
</template>
</el-table-column>
</el-table>
<!-- 商品表格分页 -->
<el-pagination
layout="prev, pager, next"
:total="tableData.length"
@current-change="current_change"
:hide-on-single-page="tableData.length > 5 ? false : ''"
>
</el-pagination>
触发翻页事件
//适用商品表格分页
current_change(currentPage: any) {
this.currentPage = currentPage;
}