el-table多選，對於當前頁的多選我們是很容易知道並顯示給用戶的，但是對於分頁後要記住哪些頁多選了哪些數據，並正確的顯示給用戶就有點小挑戰了。具體實現：第一種，搬運工在此?，來自於大佬的文章詳戳?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
<el-table
ref="multipleTable"
:data="tableData"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="索引" width="120" prop="index">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:page-size="10"
:total="total"
@current-change="handleCurrentChange">
</el-pagination>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
checkData: [],
tableData: [],
total: 11,
},
methods: {
/**
* 獲取分頁數據
* 如果該頁存在選中的數據，則選中
*/
addDataItem(val, len) {
this.tableData = Array.from({length: len}, (v, i) => v = {
index: i,
id: `${val}${i}`,
});
if (this.checkData.length) {
this.toggleSelection(this.checkData);
}
},
handleCurrentChange(page) {
if (page === 1) {
this.addDataItem(1, 10);
} else {
this.addDataItem(2, 1);
}
},
/**
* 單選
*/
handleSelect(selection, row) {
let allRows = selection.filter((item) => !!item);
if (allRows.find(item => item.id === row.id)) {
this.addRows([row]);
} else {
this.removeRows([row]);
}
},
/**
* 全選
*/
handleSelectAll(selection) {
if (selection.length > 1) {
this.addRows(this.tableData);
} else {
this.removeRows(this.tableData);
}
},
addRows(rows) {
for (const key of rows) {
if (!this.checkData.find((item) => item.id === key.id)) {
this.checkData.push(key);
}
}
},
removeRows(rows) {
if (this.checkData.length > 0) {
for (const key of rows) {
this.checkData = this.checkData.filter((item) => item.id !== key.id);
}
}
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$nextTick(() => {
const checked = this.tableData.find(tableRow => tableRow.id === row.id);
this.$refs.multipleTable.toggleRowSelection(checked, true);
});
});
} else {
this.$refs.multipleTable.toggleRowSelection(this.tableData, false);
this.removeRows(this.tableData);
}
}
},
created() {
this.addDataItem(1, 10);
},
});
</script>
</body>
</html>
第二種，翻看element-ui官方文檔，原來已經有實現的方法了，非常簡單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
<el-table
ref="multipleTable1"
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="索引" width="120" prop="index">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:page-size="10"
:total="total"
:current-page.sync="currentPage"
@current-change="handleCurrentChange">
</el-pagination>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
checkData: [],
tableData: [],
total: 13,
currentPage: 1,
},
methods: {
/**
* 獲取分頁數據
*/
addDataItem(val, len) {
this.tableData = Array.from({length: len}, (v, i) => v = {
index: i,
id: `${val}${i}`,
});
},
handleCurrentChange(page) {
this.currentPage = page;
if (page === 1) {
this.addDataItem(1, 10);
} else {
this.addDataItem(2, 3);
}
},
handleSelectionChange(val) {
this.checkData = val;
},
getRowKeys(row) {
return row.id;
},
},
created() {
this.addDataItem(1, 10);
},
});
</script>
</body>
</html>