东营网站推广,网站死链接提交,新浪云怎么做自己的网站,厦门建设厅网站问题描述#xff1a; 1、记录一个弹窗点击确定按钮后#xff0c;table列表所有勾选的数据信息2、再次打开弹窗#xff0c;回显勾选所有保存的数据信息3、遇到的bug#xff1a;切换分页#xff0c;其他页面勾选的数据丢失#xff1b;点击确认只保存当前页的数据#xff1…问题描述 1、记录一个弹窗点击确定按钮后table列表所有勾选的数据信息2、再次打开弹窗回显勾选所有保存的数据信息3、遇到的bug切换分页其他页面勾选的数据丢失点击确认只保存当前页的数据勾选数据保存后但并未回显......解决方法 Modalv-modelshowPersons title人员列表 !-- 模态框的标题 --on-cancelonClose3 !-- 取消按钮的点击事件处理函数 --width40% !-- 模态框的宽度 --:mask-closablefalse !-- 是否可以通过点击遮罩层关闭模态框 --
Form :modelpersonsForm :label-width60 inline !-- 表单组件绑定数据模型personsForm --FormItem label姓名 !-- 表单项的标签 --Input v-model.trimpersonsForm.userName clearable/Input !-- 输入框组件绑定数据模型personsForm.userName可清空输入内容 --/FormItemdiv classbtns !-- 按钮容器 --Button clickonReset1 stylemargin-right: 8px重 置/Button !-- 重置按钮点击事件处理函数onReset1 --Button typeprimary clickuserNameSearch查 询/Button !-- 查询按钮点击事件处理函数userNameSearch --/div/Formel-tablev-ifshowPersons !-- 控制表格的显示与隐藏 --refpersonsTable !-- 表格的引用名 --:datapersonsList !-- 表格的数据源 --stylemargin-top: 16px !-- 表格的样式 --row-keyuser_id !-- 表格行的唯一标识符 --selecthandleSelectionChange !-- 选择某一行时的事件处理函数handleSelectionChange --select-allhandleAllChange !-- 全选/取消全选时的事件处理函数handleAllChange --el-table-columntypeselection !-- 表格列的类型为选择列 --width45 !-- 表格列的宽度 --:reserve-selectiontrue !-- 保留之前的选择状态 --aligncenter !-- 表格列的对齐方式为居中 --fixed !-- 表格列固定在左侧 --/el-table-column label序号 width55 fixed aligncenter !-- 表格列的标签、宽度、对齐方式 --template slot-scopescope !-- 自定义列模板 --{{ scope.$index 1 }} !-- 显示行号 --/template/el-table-columnel-table-columnlabel姓名 !-- 表格列的标签 --propuser_name !-- 表格列绑定的数据字段 --:show-overflow-tooltiptrue !-- 当内容溢出时显示tooltip --//el-tablePagev-showpersonTotal 0 !-- 控制分页组件的显示与隐藏 --:totalpersonTotal !-- 总条目数 --sizesmall !-- 分页组件的尺寸 --show-elevator !-- 显示跳转输入框 --show-sizer !-- 显示每页条数选择框 --show-total !-- 显示总条目数 --classpage !-- 分页组件的样式类名 --:page-size-opts[10, 20, 30, 40] !-- 每页条数的选项 --:page-sizepersonsForm.pageSize !-- 每页条数的绑定值 --:currentpersonsForm.pageNo !-- 当前页码的绑定值 --on-changechangePersonsPage !-- 页码变化时的事件处理函数changePersonsPage --on-page-size-changepersonsPageSizeChange !-- 每页条数变化时的事件处理函数personsPageSizeChange --/div slotfooter aligncenter !-- 模态框底部的插槽内容 --Button typeprimary clickpersonsSubmit确 定/Button !-- 确定按钮点击事件处理函数personsSubmit --/div
/Modal在data中定义暂存勾选的人员Id和人员姓名
data () {return {personsList: [], // 人员列表listechoList: [],// 人员选中的所有idechoListName: []// 人员选中的所有名字}首先需要通过接口获取所有待勾选的人员信息回显之前暂存的数据信息
// 获取参会人员列表 获取全部人员名单getpersonsList (pageNo, pageSize) {//调用接口personsList(this.personsForm).then((response) {this.personTotal response.page.totalthis.personsList response.data //暂存所有的人员信息this.$nextTick(() {this.personsList.forEach(item {//查询当前列表并回显if (this.echoList.includes(item.user_id)) {//设置当前行数据为选中状态this.$refs.personsTable.toggleRowSelection(item, true); }})})})}其中“ on-cancelonClose3 ”表示关闭modal弹窗后进行的操作保存勾选数据、清空勾选效果、清空form表单、重置分页信息 // 关闭人员列表弹框onClose3 () {this.showPersons false //关闭modal弹窗this.echoList [] //置空暂存的勾选人员Idthis.echoListName [] //置空暂存的勾选人员姓名this.$refs.personsTable.clearSelection(); //清空未保存勾选this.personsForm.pageSize 10this.personsForm.pageNo 1this.personsForm.userName null}select “ select-all ”官网解释如下 具体实现代码及解释如下 // 选择参会人员已经存在的数据就取消勾选、未存在过的数据就加入勾选handleSelectionChange(selecteds, row) {if (!this.echoList.includes(row.user_id)) {this.echoList.push(row.user_id); //暂存新勾选的人员Idthis.echoListName.push(row.user_name); //暂存新勾选的人员姓名} else {this.echoList.forEach((id, index) {if (id row.user_id) {this.echoList.splice(index, 1); //删除暂存的需要取消勾选的人员Idthis.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); //暂存新勾选的人员Idthis.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); //删除暂存的需要取消勾选的人员Idthis.echoListName.splice(index, 1); //删除暂存的需要取消勾选的人员姓名}});});}}最后记得在关闭弹窗时清空勾选及表单 this.echoList []this.echoListName []this.$refs.personsTable.clearSelection();this.personsForm.userName null;
