正文
vue+el-table在ajax分页时支持全选单页和全选所有
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
需求：el-table中，ajax分页的情况下，要支持全选单页和全选所有页中的记录，效果如下图所示：
界面代码：
<el-table :data="tableData"
:height="tableHeight"
border
style="width: 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">
<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>
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();
}
},
}
}
在每次点击“页码“之后，会自动执行查询方法，此时，如果点击了全选所有按钮，要在数据执行查询之后，再选中当前页面所有项，代码如下图所示：
//执行查询方法getList后回调函数当中编写如下代码：
if(this.checkedAll){
this.$nextTick(()=>{
this.changeCheckAll(this.checkedAll);
})
}
由于要在dom渲染之后执行，所以使用了this.$nextTick()方法。
在 element-ui 的Table组件当中，并没有提供给表头当中的复选框设置文本的属性和方法，我们可以通过使用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;
}
/deep/用于在css作用域当中进行样式透传，覆盖子组件的样式。
分页组件Pager.vue是对el-pagination组件的二次封装，其代码如下：
<!-- 分页查询
<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 {
width: 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-width: 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 {
width: 28px;
}
.el-pagination__jump .el-input__inner {
box-sizing: border-box;
width: 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>
完！
