1. 対象となる効果
すべてのコードは以下の App.vue に書かれており、コピーして貼り付けるだけで実行できます。
現在選択されているデータは5件です
以下をクリックするとページが切り替わり、選択したデータが消えます
2. 原則
(1) el-table チェック ボックス。変数配列selectedRow:[ ]を使用して、どのデータが選択されているかを監視します。
<el-table-column type="selection" width="55"></el-table-column>
el-table 自体には、テーブル内のチェック ボックスの変更を監視するメソッドがあります: @selection-change、コールバック関数のパラメータは選択されたテーブル データです
<el-table :data="tableList" border style="width: 100%" @selection-change="val => selectedRow = val">(2) 選択したデータを保存します。
el-table に行識別を追加します: row-key="val => val.date"。コールバック関数のパラメータはテーブルの各行のデータです。ここでは、各行を一意に識別できるデータを選択するのが最善です。キーの戻り値、それ以外の場合は選択内容の保存に失敗しました
<el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
@selection-change="val => selectedRow = val">チェックボックスにreserve-selection="true" を追加します。
<el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
(3) スライスページングの原理：
ここでは、バックグラウンドへのデータ取得のリクエストはありません。手動で配列を作成し、スライスで切り取り、バックグラウンドにデータの取得をリクエストしました。上記の方法では、ページをめくって選択したデータを保存することもできます。
lice(start, end) : 元の配列を変更せずに新しい配列を返します。区間には先頭がありますが、終わりはありません [start, end)
ページネーションの計算式：slice( (ページ数 - 1) * 1 ページあたりのサイズ、ページ数 * 1 ページあたりのサイズ )
例えば：
ページ数 = 1、ページあたりのサイズ = 5
配列は 0 から始まるため、slice(0, 5) => は配列インデックスを 0、1、2、3、4 要素として受け取ります。
ページ数 = 2、1 ページあたりのサイズ = 5
lice(5, 10) => インデックスが 5、6、7、8、9 である要素を取得します
……
3. ソースコード
<template>
<div id="app">
<div>已选中了条数: {
{ selectedRow?.length }}</div>
<el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
@selection-change="val => selectedRow = val">
<el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
<el-table-column type="index" width="55" label="序号"></el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pageConfig.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="pageConfig.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="pageConfig.total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
pageConfig: {
pageNum: 1,
pageSize: 5,
total: 0
},
selectedRow: [],
tableData: [{
date: '2016-05-01',
name: '王小虎',
address: '北京'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海'
}, {
date: '2016-05-03',
name: '王小虎',
address: '广州'
}, {
date: '2016-05-04',
name: '王小虎',
address: '深圳'
},
{
date: '2016-05-05',
name: '王小虎',
address: '杭州'
}, {
date: '2016-05-06',
name: '王小虎',
address: '武汉'
}, {
date: '2016-05-07',
name: '王小虎',
address: '长沙'
}, {
date: '2016-05-08',
name: '王小虎',
address: '佛山'
}, {
date: '2016-05-09',
name: '王小虎',
address: '东莞'
}, {
date: '2016-05-10',
name: '王小虎',
address: '成都'
}],
tableList: []
}
},
created() {
this.pageConfig.total = this.tableData.length;
this.getList(this.pageConfig.pageNum, this.pageConfig.pageSize)
},
methods: {
// 监听页面大小变化
handleSizeChange(val) {
this.getList(this.pageConfig.pageNum, val)
},
// 监听当前页变化 (currentPage-1)*pageSize,pageSize
handleCurrentChange(val) {
this.getList(val, this.pageConfig.pageSize)
},
// 获取表格数据
getList(pageNum, pageSize) {
this.tableList = this.tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>