vue 实现前端分页
<template>
<div class="table">
<el-table :data="dataShow" stripe style="width: 100%">
<el-table-column prop="port" label="港口名称"></el-table-column>
<el-table-column prop="bill_count" label="交易次数" sortable></el-table-column>
<el-table-column prop="prop" label="交易占比" sortable :formatter="formatter"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope" size="small">
<el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="page"
background
layout="prev,pager, next, jumper"
:total="total>5000?5000:total"
:page-sizes="[10, 20, 30, 40]"
:page-size="10"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
import { tradeList } from "../../../../api/table";
export default {
data() {
return {
tableData: [],
pageSize: 10,
dataShow: [],
currentPage: 1,
total: 0
};
},
methods: {
handleSizeChange() {},
handleCurrentChange(val) {
this.currentPage = val;
this.getAllPort();
},
getAllPort() {
this.loading = true;
let data = {
url: `/async/allport?id=${this.$route.query.urlId}&date_type=${this.tab}&key=${this.keywords}`
};
tradeList(data).then(res => {
if (res.status == 1 && res.data.docs) {
this.tableData = res.data.docs;
this.total = res.data.total_bill_count;
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.dataShow = this.tableData.slice(begin, end);
} else {
this.$message({
message: "暂无数据",
type: "error"
});
}
});
}
},
mounted() {
this.getAllPort();
}
};
</script>