一、el-table多选分页时，记住其他页的选中状态
实现方法：
核心是el-table-column的reserve-selection属性
image.png
1.通过type="selection"设置复选框列，重点在于 reserve-selection 属性，设置为true时，数据更新之后保留之前选中的数据。
2.需要表格属性“row-key”的配合，在使用 reserve-selection 功能的情况下，该属性是必填的。将row-key设置为表格中唯一的字段名称（例如programId）。这样就实现了后端分页在翻页或切换条数时，记住之前的复选框选项。
<el-table
:data="tableData"
:row-key="getRowKey"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
...
</el-table>
getRowKey(row) {
//唯一标识
return row.id
},
handleSelectionChange(selected) {
console.log('选中的数据list---', selected)
},
二、el-table在ajax分页时支持单页全选和所有页全选
image.png
image.png
界面代码：
<el-table :data="tableData"
:height="tableHeight"
border
style=" 100%"
ref="table"
@selection-change="handleSelectionChange"
>
<el-table-column prop="id"
fixed
align="center">
<el-table-column type="selection"
width="75">
</el-table-column>
<template slot="header" slot-scope="scope">
<div>
<el-checkbox v-model="checkedAll"
@change="changeCheckAll">所有</el-checkbox>
</div>
</template>
</el-table-column>
......
</el-table>
<pager :pager="pager"
@query="getList"
@setPager="onChangePage"></pager>
table上使用了ref属性，因为全选和反选时要用到dom操作方法toggleRowSelection，同样，表格自动铺满纵向屏幕时，也需要进行dom操作，这并非本节所讲内容，只是简单提一下，el-table并没有像layui中的table那样提供百分比-固定像素的方式响应式制定表格高度，我们得手动用js计算浏览器屏幕高度。
js部分代码如下：
import pager from "@/components/table/Pager.vue";
export default {
components: {pager},
data () {
return {
checkedAll: false, //全选所有
}
},
methods: {
// 全选操作
handleSelectionChange (val) {
this.loading = val.length > 0 ? false : true;
this.multipleSelection = val;
},
// 选择需要的/取消选中
toggleSelection (rows) {
if (rows) {
rows.forEach(row => {
this.$refs.table.toggleRowSelection(row);
});
} else {
this.$refs.table.clearSelection();
}
},
//改变全选所有复选框
changeCheckAll (val) {
if (val) {
// 全选选中时当前页所有数据选中
this.tableData.forEach(row => {
if (row) {
this.$refs.table.toggleRowSelection(row, true);
}
});
} else {
this.$refs.table.clearSelection();
}
},
}
}
在每次点击“页码“之后，会自动执行查询方法，此时，如果点击了全选所有按钮，要在数据执行查询之后，再选中当前页面所有项，代码如下所示：
由于所有的dom操作要在dom渲染之后执行，所以使用了this.$nextTick()方法。
//执行查询方法getList后回调函数当中编写如下代码：
if(this.checkedAll){
this.$nextTick(()=>{
this.changeCheckAll(this.checkedAll);
})
}
在element-ui的Table组件当中，并没有提供给表头当中的复选框设置文本的属性和方法，我们可以通过使用css伪类来创建文本。
/deep/用于在css作用域当中进行样式透传，覆盖子组件的样式。
/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
content: "当页";
color: #606266;
font-weight: 500;
margin-left: 10px;
font-size: 14px;
}
分页组件Pager.vue是对el-pagination组件的二次封装，其代码如下：
最重要的一点，就是所有页全选时的id集合，是每次查询时传递过来的，将其临时存储在data中，这样的话需要进行批量操作时，可以直接将这些id集合传递过去。当然，如果查询接口不把这些id集合带过来，我们也可以传一个所有页全选的标识给到后端，后端根据这个标识，重新去查询数据。
<!-- 分页查询
<pager :pager=[分页对象] @query=[列表查询方法] />
-->
<template>
<div class="pagination-box clear">
<span class="page-total fl">
共有记录：
<span>{{ pager.total }}</span>条
</span>
<el-pagination
:small="small"
:layout="layout"
background
:pager-count="7"
:total="pager.total"
:current-page.sync="pager.pageNum"
:page-size="pager.pageSize"
:page-sizes="pageSize"
@size-change="onChangeSize"
@current-change="onChangePage"
></el-pagination>
<span v-if="refresh" class="btn-refresh fn-right" title="刷新" @click="$emit('query')">
<i class="fas fa-redo"></i>
</span>
</div>
</template>
<script>
export default {
name: "Pager",
props: {
small: {
type: Boolean,
default: false
},
layout: {
type: String,
default: "sizes,jumper, prev, pager, next"
},
pager: {
type: Object,
required: true
},
refresh: {
type: Boolean
},
pageSize: {
type: Array,
default: () => {
return [10, 15, 20, 50, 100, 200];
}
},
props: {
type: Object,
required: false,
default: () => ({
pageNum: "pageNum", // 第几页
pageSize: "pageSize", // 显示条数
total: "total" // 总记录条数
})
}
},
// 设置绑定参数
model: {
prop: "pager",
event: "setPager"
},
computed: {
total() {
return this.pager[this.props.total] || 0;
},
// 检测获取到的数据是否为空
isEmptyList() {
return (
Math.ceil(
this.pager[this.props.total] / this.pager[this.props.pageSize]
) < this.pager[this.props.pageNum]
);
}
},
watch: {
total() {
// 存在记录但未获取到数据时, 重新请求
if (this.pager[this.props.pageNum] > 1 && this.isEmptyList) {
this.$emit(
"setPager",
Object.assign(this.pager, {
[this.props.pageNum]: this.pager[this.props.pageNum] - 1
})
);
this.$emit("query");
}
}
},
methods: {
// 每页条数
onChangeSize(pageSize) {
const temp = {
[this.props.pageSize]: pageSize,
// 当显示条数小于或等于总条数时，重置页数
[this.props.pageNum]:
pageSize <= this.total ? 1 : this.pager[this.props.pageNum]
};
this.$emit("setPager", Object.assign(this.pager, temp));
// 触发父组件查询请求
this.$emit("query");
},
// 翻页
onChangePage(pageNum) {
this.$emit(
"setPager",
Object.assign(this.pager, { [this.props.pageNum]: pageNum })
);
this.$emit("query");
}
}
};
</script>
<style lang="scss" scoped>
.pagination-box {
100%;
padding-top: 14px;
position: relative;
.el-pagination {
float: right;
}
/deep/ .el-pagination__sizes {
position: absolute;
top: 14px;
left: 150px !important;
}
}
.page-total {
padding-left: 20px;
height: 31px;
line-height: 31px;
font-size: 14px;
color: #838383;
}
.page-total span {
color: #3a3a3a;
}
.closeBtn {
text-align: center;
margin-top: 10px;
}
.el-input--small .el-input__inner {
height: 25px;
line-height: 25px;
}
.el-input__inner {
border-color: #838383;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
font-size: 19px;
position: relative;
top: -3px;
}
.el-pager li {
margin: 0 8px;
border-radius: 3px;
height: 24px;
line-height: 24px;
min- 20px;
}
.el-pager li.active {
background: #1881bf !important;
}
.el-pagination__jump {
margin-right: 20px;
font-size: 14px;
color: #838383;
}
.el-pagination__jump .pagination__editor {
margin-right: 20px;
}
.el-pagination__jump .el-pagination__editor.el-input {
28px;
}
.el-pagination__jump .el-input__inner {
box-sizing: border-box;
100%;
color: #3a3a3a;
font-size: 14px;
border-color: #838383 !important;
height: 24px;
line-height: 24px;
border-radius: 3px;
background: #fff !important;
}
.el-pagination .el-select .el-input .el-input__inner {
border-radius: 15px !important;
font-size: 14px;
border-color: #838383 !important;
background: #fff !important;
}
.el-button--text > span > span {
color: #1881bf;
font-size: 12px;
text-decoration: underline;
}
</style>
