1、table表格多选，并且切换分页之后能记住上一页的选项；
2、回显数据，切换分页之后再切换回来依然能回显数据；
3、点击选项，未保存数据，切换页面后再切换回来初始化数据勾选状态；
4、全选，取消全选数据正常变化。
5、
使用了dialog来显示table
；
6、后台分页。
1、el-table方法：
select和select-all
、
toggleRowSelection和clearSelection
2、el-table-column类型：
type="selection"
3、分页组件：
Pagination
（将el-pagination封装过一层）
逻辑代码说明在最下面。
<el-dialog
title="产品列表"
width="69%"
:visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:before-close="handleClose"
<el-divider></el-divider>
<el-table
ref="multipleTable"
row-class-name="pointer"
:data="productList.list"
@select="handleSelectionChange"
@select-all="handleAllChange"
<el-table-column type="selection" align="center" width="55" />
<el-table-column label="方案状态">
<template slot-scope="scope">{{ scope.row.schemaStatustext || '--' }}</template>
</el-table-column>
<el-table-column label="产品方案名称">
<template slot-scope="scope">{{ scope.row.schemaName || '--' }}</template>
</el-table-column>
</el-table>
<div style="text-align: right">
<pagination
v-show="productList.total > 0"
:total="productList.total"
:page.sync="listQueryPage1"
:limit.sync="listQueryLimit1"
@pagination="getQueryPages"
</div>
<el-row>
<el-button type="default" @click="exit">退出</el-button>
<el-button type="primary" @click="save">保存</el-button>
</el-row>
</el-dialog>
data() {
return {
productList:{},
echoList: [],
visible: false
methods:{
showproductsList() {
this.dialogVisible = true;
this.getchannelRelas();
this.getQueryPages();
exit() {
this.$refs.multipleTable.clearSelection();
this.visible = false;
handleClose(down) {
this.$refs.multipleTable.clearSelection();
down();
getQueryPages() {
this.$store.dispatch('channel/querypageps', {
page: 1,
limit: 10,
queryCondition: {}
.then(res => {
const { status, data } = res;
if (status === 200) {
this.productList = { ...data };
this.$nextTick(() => {
this.productList.list.forEach(item => {
if (this.echoList.includes(item.id)) {
this.$refs.multipleTable.toggleRowSelection(item, true);
});
});
});
getchannelRelas() {
this.$store.dispatch('channel/channelRelas', {
id: this.channelleaseId
.then(res => {
const {status, data } = res;
if (status === 200 && data) {
this.echoList= data.map(item => item.id);
});
handleSelectionChange(selecteds, row) {
if (!this.echoList.includes(row.id)) {
this.echoList.push(row.id);
} else {
this.echoList.forEach((id, index) => {
if (id === row.id) {
this.listId.splice(index, 1);
});
handleAllChange(selecteds) {
if (selecteds.length > 0) {
selecteds.forEach(item => {
if (!this.echoList.includes(item.id)) {
this.echoList.push(item.id);
});
} else {
this.productList.list.forEach(item => {
this.echoList.forEach((id, index) => {
if (id === item.id) {
this.echoList.splice(index, 1);
});
});
以上部分就是核心代码，理解流程逻辑，就能明白分页、多选、回显的真谛了。
回显数据：
显示dialog时获取echoList（回显数据）以及产品列表（productList）第一页数据。其实这里应该使用async和await方式，因为两个函数是异步操作，无法判断先后顺序，先不管这个。在获取productList后循环判断是否与echoList匹配，如果匹配则使用this.$refs.multipleTable.toggleRowSelection(item, true)方式勾选数据，当切换分页的时候还会继续执行以上的判断。回显数据就写完了。
单项勾选以及取消勾选，全选以及取消全选：
单项勾选操作方法：handleSelectionChange，当点击checkbox时，循环判断echoList中是否有当前行信息，若是没有，则说明是选中状态，push进echoList中；若是存在当前行信息，则说明是取消勾选，则将echoList中当前行id删除。
全选操作方法：handleAllChange，全选方法有一个参数selecteds，这是一个选中项数组，记录了有多少条选中项；当进行全选操作时，判断selecteds数组的length，若length>0，循环selecteds判断echoList数组中是否与selecteds中id匹配，若不匹配，则表示新增选中项，循环判断是为了去除重复项，还有一种简单的去除数组重复项的方法，使用Set：Array.from(new Set(this.echoList))；若length===0，则代表取消勾选项，这时候一定要循环productList，判断echoList中的id是否与productList中的id是否匹配，若匹配，则删除取消项。
当前操作与回显数据操作结合使用，则切换分页记住勾选取消状态便成功了。
关闭dialog框清除未保存过的状态
当勾选或取消勾选时，未进行保存，则关闭页面重新进来时，应当初始化勾选的状态，未保存过的状态不应该存在。则可以使用**this.$refs.multipleTable.clearSelection()**方法来初始化数据。
若有问题，随时欢迎。
需求：1、table表格多选，并且切换分页之后能记住上一页的选项；2、回显数据，切换分页之后再切换回来依然能回显数据；3、点击选项，未保存数据，切换页面后再切换回来初始化数据勾选状态；4、全选，取消全选数据正常变化。5、使用了dialog来显示table；6、后台分页。使用el-table：1、el-table方法：select和select-all 、toggleRowSelection和clearSelection2、el-table-column类型：type="selection"
之前有一个是基于 vue2 开发的
vue3-pro-table 是基于 vue3 开发
一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量
配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果
配置化的表格项，跟 el-table-column 的配置属性类似
配置化的搜索表单，支持大部分表单元素
配置化的分页，跟 el-pagination 的配置属性类似
自定义是否显示搜索和分页
自定义标题栏和工具栏
丰富的插槽提供功能扩展
安装和引入
// npm
npm install vue3-pro-table
// yarn
yarn add vue3-pro-table
该组件依赖
vue3 element puls表格跨页全选实现，vue3 element puls表格,后端分页时,实现分页多选功能，element puls跨页多选，element puls 表格跨分页多选及回显的实现示例，表格分页多选功能，vue3 elementPlus设置表格跨页勾选，vue3 Element plus 最新分页跨页全选操作(跨页记住已经勾选)，vue3 element plus table组件跨分页多选及回显，vue3 element plus el-table-column type="se
但是实现代码中传入数据的时候却无法实现多选框的回显
想要实现的功能:已经选中的数据可以在table中实现回显。每次切换分页时，可以保存上一页选中的数据
:row-key="getRowVoucherKeys"和:reserve-selection="true"缺一不可
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。
今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。
然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。
直接上修改的代码看看
<el-pagination
:current-page.sync=currentPage
:page-sizes=[10, 30, 50]
:page-size=pageSize
:total=total
layout=tota
1.因为第一次加载下拉框列表的时候，请求列表中所有数据和列表默认回显数据不同，所以会出现被刷新，而出现回显随机问题，，，
PS：vue 运用ElementUI,做select下拉框回显
第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。
v-loading="loading"
element-loading-text="加载中..."
@selection-change="handleSelectionChange"
:row-key="k
<template>
<el-select v-model="selectedOptions" multiple placeholder="请选择">
<template #default>
<el-checkbox-group v-model="selectedOptions">
<el-checkbox label="Option 1"></el-checkbox>
<el-checkbox label="Option 2"></el-checkbox>
<el-checkbox label="Option 3"></el-checkbox>
</el-checkbox-group>
</template>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOptions: []
</script>
在上面的代码中，我们使用el-select的slot来自定义下拉框的选项，然后在自定义选项中使用el-checkbox-group实现多选。v-model绑定了选中的选项，即selectedOptions。
