Paging implementation method
1. The backend performs query paging according to the pageNo and pageSize passed by the frontend, and returns the data and the total number of items.
2. The backend returns all the data, and the frontend paginates itself according to all the data returned by the backend.
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
在table表格绑定的data属性上进行分页计算。
初始化数据
currentPage: 1,
currentIndex: "",
pagesize: 7,
tableData: [],
方法
handleSizeChange(val) {
this.pagesize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
},****NOTE A PROBLEM****
When the select all button in the table and the data in the drop-down box of the table are operated at the same time, select the select all button first, and then operate the data in the table, then the select all button will disappear bug
At this time, you need to add :row-key and :reserve-selection="true", see elemplent-ui official document for details
<el-table
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
border
:row-key="getRowKeys"
@selection-change="baseSensitivity_OnSelecrt"
>
// :row-key="getRowKeys"
<el-table-column type="selection" width="55" :reserve-selection="true" />
//:reserve-selection="true"
getRowKeys(row) {
return row.id;
},final complete code
<template>
<div>
<el-table
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
border
:row-key="getRowKeys"
@selection-change="baseSensitivity_OnSelecrt"
>
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column
prop="Factor_Type"
label="因子类型"
show-overflow-tooltip
align="center"
>
<template slot-scope="scope">
<el-select v-model="scope.row.Factor_Type" placeholder="请选择因子类型">
<!-- <el-option key="0" label="间接因子" value="0" />
<el-option key="1" label="直接因子" value="1" /> -->
<el-option
v-for="item in displayOptions"
:key="item.label"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
</el-table>
<div style="margin-top: 0.2rem; margin-left: 0.2rem">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[6, 8, 10]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
baseensitivityAllOnSelecrList: [],
currentPage: 1,
currentIndex: "",
pagesize: 7,
tableData: [],
displayOptions: [
{
label: "间接因子",
},
{
label: "直接因子",
},
],
};
},
created() {
this.getInit();
},
methods: {
getRowKeys(row) {
return row.id;
},
// 添加工序表格多选事件 list：选中的数据列表
baseSensitivity_OnSelecrt(list) {
this.baseensitivityAllOnSelecrList = list;
},
getInit() {
this.tableData = [
{
id: 1,
name: "张三1",
amount1: "6",
},
{
id: 2,
name: "张三2",
amount1: "2",
},
{
id: 3,
name: "张三3",
amount1: "4",
},
{
id: 4,
name: "张三4",
amount1: "4",
},
{
id: 5,
name: "张三5",
amount1: "5",
},
{
id: 6,
name: "张三6",
amount1: "6",
},
{
id: 7,
name: "张三7",
amount1: "2",
},
{
id: 8,
name: "张三8",
amount1: "4",
},
{
id: 9,
name: "张三9",
amount1: "4",
},
{
id: 10,
name: "张三10",
amount1: "5",
},
{
id: 11,
name: "张三11",
amount1: "6",
},
{
id: 12,
name: "张三12",
amount1: "2",
},
{
id: 13,
name: "张三13",
amount1: "4",
},
{
id: 14,
name: "张三14",
amount1: "4",
},
{
id: 15,
name: "张三15",
amount1: "5",
},
{
id: 16,
name: "张三16",
amount1: "6",
},
{
id: 17,
name: "张三17",
amount1: "2",
},
{
id: 18,
name: "张三18",
amount1: "4",
},
{
id: 19,
name: "张三19",
amount1: "4",
},
{
id: 20,
name: "张三20",
amount1: "5",
},
];
},
handleSizeChange(val) {
this.pagesize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-pager li.active {
background-color: var(--primary, #3461ff);
color: #fff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
border-color: #3461ff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
color: #3461ff;
}
::v-deep .el-select-dropdown__item .selected {
color: #3461ff !important;
}
/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #08c0b9;
color: #fff;
}
.el-pagination.is-background .el-pager li.active {
color: #fff;
cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
background-color: #08c0b9;
color: #fff;
}
/*带背景的分页按钮背景色end*/
/*不带背景的分页按钮背景色begin*/
.el-pager li.active {
color: #08c0b9;
cursor: default;
}
.el-pagination .el-pager li:hover {
color: #08c0b9;
}
.el-pagination .el-pager li:not(.disabled):hover {
color: #08c0b9;
}
/*不带背景的分页按钮背景色end*/
</style>
Final realization rendering
