问题描述：
1、记录一个弹窗点击确定按钮后，table列表所有勾选的数据信息
2、再次打开弹窗，回显勾选所有保存的数据信息
3、遇到的bug：切换分页，其他页面勾选的数据丢失；点击确认只保存当前页的数据；勾选数据保存后但并未回显......
解决方法：
<!-- 人员列表 -->
<Modal
v-model="showPersons"
title="人员列表"
@on-cancel="onClose3"
width="40%"
:mask-closable="false"
>
<Form :model="personsForm" :label-width="60" inline>
<FormItem label="姓名：">
<Input v-model.trim="personsForm.userName" clearable></Input>
</FormItem>
<div class="btns">
<Button @click="onReset1" style="margin-right: 8px">重 置</Button>
<Button type="primary" @click="userNameSearch">查 询</Button>
</div>
</Form>
<el-table
v-if="showPersons"
ref="personsTable"
:data="personsList"
style="margin-top: 16px"
row-key="user_id"
@select="handleSelectionChange"
@select-all="handleAllChange"
>
<el-table-column
type="selection"
width="45"
:reserve-selection="true"
align="center"
fixed
/>
<el-table-column label="序号" width="55" fixed align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column
label="姓名"
prop="user_name"
:show-overflow-tooltip="true"
/>
</el-table>
<Page
v-show="personTotal > 0"
:total="personTotal"
size="small"
show-elevator
show-sizer
show-total
class="page"
:page-size-opts="[10, 20, 30, 40]"
:page-size="personsForm.pageSize"
:current="personsForm.pageNo"
@on-change="changePersonsPage"
@on-page-size-change="personsPageSizeChange"
/>
<div slot="footer" align="center">
<Button type="primary" @click="personsSubmit">确 定</Button>
</div>
</Modal>在data中定义暂存勾选的人员Id和人员姓名：
data () {
return {
personsList: [], // 人员列表list
echoList: [],// 人员选中的所有id
echoListName: []// 人员选中的所有名字
}首先需要通过接口获取所有待勾选的人员信息，回显之前暂存的数据信息：
// 获取参会人员列表 获取全部人员名单
getpersonsList (pageNo, pageSize) {
//调用接口
personsList(this.personsForm).then((response) => {
this.personTotal = response.page.total
this.personsList = response.data //暂存所有的人员信息
this.$nextTick(() => {
this.personsList.forEach(item => {
//查询当前列表并回显
if (this.echoList.includes(item.user_id)) {
//设置当前行数据为选中状态
this.$refs.personsTable.toggleRowSelection(item, true);
}
})
})
})
}其中“ @on-cancel="onClose3" ”表示关闭modal弹窗后进行的操作：保存勾选数据、清空勾选效果、清空form表单、重置分页信息
// 关闭人员列表弹框
onClose3 () {
this.showPersons = false //关闭modal弹窗
this.echoList = [] //置空暂存的勾选人员Id
this.echoListName = [] //置空暂存的勾选人员姓名
this.$refs.personsTable.clearSelection(); //清空未保存勾选
this.personsForm.pageSize = 10
this.personsForm.pageNo = 1
this.personsForm.userName = null
}" @select "，“ @select-all ”官网解释如下：
【el-table官网链接地址：Element - The world's most popular Vue UI framework】
具体实现代码及解释如下：
// 选择参会人员（已经存在的数据就取消勾选、未存在过的数据就加入勾选）
handleSelectionChange(selecteds, row) {
if (!this.echoList.includes(row.user_id)) {
this.echoList.push(row.user_id); //暂存新勾选的人员Id
this.echoListName.push(row.user_name); //暂存新勾选的人员姓名
} else {
this.echoList.forEach((id, index) => {
if (id == row.user_id) {
this.echoList.splice(index, 1); //删除暂存的需要取消勾选的人员Id
this.echoListName.splice(index, 1); //删除暂存的需要取消勾选的人员姓名
}
});
}
},
// 全选、取消全选
handleAllChange(selecteds) {
if (selecteds.length > 0) {
selecteds.forEach(item => {
if (!this.echoList.includes(item.user_id)) {
this.echoList.push(item.user_id); //暂存新勾选的人员Id
this.echoListName.push(item.user_name); //暂存新勾选的人员姓名
}
});
} else {
this.personsList.forEach(item => {
this.echoList.forEach((id, index) => {
if (id === item.user_id) {
this.echoList.splice(index, 1); //删除暂存的需要取消勾选的人员Id
this.echoListName.splice(index, 1); //删除暂存的需要取消勾选的人员姓名
}
});
});
}
}最后，记得在关闭弹窗时清空勾选及表单：文章来源：https://www.toymoban.com/news/detail-474329.html
this.echoList = []
this.echoListName = []
this.$refs.personsTable.clearSelection();
this.personsForm.userName = null;前端小白积累经验篇~~文章来源地址https://www.toymoban.com/news/detail-474329.html
到了这里，关于解决el-table组件中，分页后数据的勾选、回显问题？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
