ページングの実装方法
1. バックエンドは、フロントエンドから渡された pageNo と pageSize に従ってクエリ ページングを実行し、データとエントリの総数を返します。
2. バックエンドはすべてのデータを返し、フロントエンドはバックエンドから返されたすべてのデータに従ってページネーションを行います。
: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;
},****問題に注意してください****
テーブル内の全選択ボタンとテーブルのドロップダウンボックス内のデータを同時に操作した場合、最初に全選択ボタンを選択してからテーブル内のデータを操作すると、全選択ボタンが消えます。バグ
このとき、:row-key と :reserve-selection="true" を追加する必要があります。詳細は elemplent-ui の公式ドキュメントを参照してください。
<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;
},最終的な完全なコード
<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>
最終的な実現レンダリング
