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官方文档，原来已经有实现的方法了，非常简单
图片.png
<!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>
网友评论