window.open()弹框页面交互+表格数据回显以及跨页回显

直接上效果：

情景描述：（vue+element-ui）

前面显示，显示数据来源来之后面按钮，点击按钮弹出一个新的页面，弹出新的弹框使用的是window.open()；如果使用嵌套组件化思想，此父子组件相互传参就比较简单，没有技术难度，实现起来也比较简单。使用window.open()弹出新页面，难度在于父子间的通信，研究了很久，子组件使用h5中的postMessage方法，通过父组件监听方法，实现通信，在用父组件向子组件通信时使用同样的方法时，遇到了问题，暂时没有解决，用了一个简单的方法获取父组件的值。
原始的用意想在父子组件通过固定的方法获取父组件传递的数据和子组件触发固定方法，能把值传给父组件。

子组件向父组件通信：

confirm:function(){debugger;// type 用来var json = {type:'echoInfo',data:[]};json.data = this.selected ;// var jsonStr = JSON.stringify(json);// 使用 h5中的postMessage 能解决页面跨域问题 第一个参数表示 需要回传的数据，第二个参数时url * 表示不限制window.opener.postMessage(json,'*');window.close();},

父组件监听：

//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {var that = this ;window.addEventListener('message', function(e){if(e.data !=undefined && e.data !='' ){debuggerif(e.data ==undefined || e.data ==''){return ;} // var json = JSON.parse(e.data);e.data;var json = e.data;if(json.type =="echoInfo"){that.echoData = json.data ;// 传递过来的值that.receiveMessage(json.data);}}});
},

父组件—>子组件的通信（以下方案不具有通用性，不建议使用，只是提供一种思路）

  <el-input id="parentValue" v-model="echo" placeholder="能确定回显内容的唯一值,如id" disabled ></el-input>

 window.open(BaseUrl+"/#/elementTable", 'newwindow', 'height=800, width=1200, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');

子组件获取父组件的值

  var echoInfo =  window.opener.document.getElementById("parentValue").value;

el-table表格回显的key point code:

if (this.selected !=undefined && this.selected !='') {for(var i=0;i<this.pagination.resultList.length;i++){for(var j=0;j<this.selected.length;j++){if(this.pagination.resultList[i].name===this.selected[j].name){this.$refs.multipleTable.toggleRowSelection(this.pagination.resultList[i]);// 回显选中默认数据的关键点}}  }} else {this.$refs.multipleTable.clearSelection();}

<el-tableref="multipleTable":data="pagination.resultList"@select="onSelect"@select-all="onSelectALL"style="width: 100%">            <!--  :selectable="selectable" --><el-table-column type="selection"  :reserve-selection="true"></el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"></el-table-column><el-table-columnprop="tag"label="标签"width="100":filters="[{ text: '同学', value: '同学' }, { text: '老师', value: '老师' }]":filter-method="filterTag"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table>

涉及跨页回显时的处理，监听表格数据的变化

 selected:[],// 实时选中数据，用于回显 记录需要回显的数据 实时更新falseList:[],// 记录取消的数据trueList:[],// 记录选中的数据

监听数据的变化: selectedd的数据就是需要默认选中的数据，此字段是实时更新的。

 watch:{pagination:function(op){debugger;this.resultList = op.resultList ;},falseList:function(value){if(this.trueList.length == 0){var totalArray = this.mergeArrayRelaseSame(this.selected,this.trueList);if(this.falseList !='' && this.falseList.length !=0){// 总数据中删除 取消的数据var len = this.falseList.length ;for(var i=0;i<len;i++){var totalLen = totalArray.length ;for(var j=totalLen -1 ;j>=0;j--){if(totalArray[j].id == this.falseList[i].id){totalArray.splice(j,1);break}}}}this.selected = totalArray ;console.log(this.selected);}},trueList:function(value){// 开始回显的数据+进入页面选中的数据-清除选中的数据// selected+trueList-falseListvar totalArray = this.mergeArrayRelaseSame(this.selected,this.trueList);if(this.falseList !='' && this.falseList.length !=0){// 总数据中删除 取消的数据var totalLen = totalArray.length ;var len = this.falseList.length ;for(var i=0;i<len;i++){for(var j=totalLen -1 ;j>=0;j--){if(totalArray[j].id == this.falseList[i].id) // 判断数据是否需要删除的依据{ totalArray.splice(j,1);break}}}}this.selected = totalArray ;console.log(this.selected);},},

关键处理代码：

思路：实时监听选中和取消的数据，并实时计算需要回显的数据并实时更新selected，保证准确性。完全具备通用性。

此处参考文档地址：https://juejin.im/post/5d0091236fb9a07eec59c265

**项目中需要需要实时更新回显，跨页回显，此博文给我本人很好的解决思路，完美的解决了当时遇到的问题，本人结合原作者文章给予的思路和参考处理方案，部分引用原作者代码。完美解决问题，在此。对作者表示感谢。
**

//表格当前页全选出发函数onSelectALL:function(rows){this.indeterminate = true ;var lenNow = this.resultList.length;// 判断勾选全选本页是选中 还是取消if(rows.indexOf(this.resultList[0]) !== -1){debugger//选中for(var i=0; i<lenNow ;i++){// 记录撤销数组 选中后删除数据操作for(var n = 0;n<this.falseList.length;n++){if(this.falseList[n].id== this.resultList[i].id){this.falseList.splice(n,1)}}// 记录选中数据数据 选中部分操作if(this.trueList.length !== 0){if(this.trueList.indexOf(this.resultList[i]) === -1){this.trueList.push(this.resultList[i]);}}else{if(this.trueList.indexOf(this.resultList[i])=== -1){this.trueList.push(this.resultList[i]);}}}}else{debugger// 取消操作for(var j=0;j<lenNow;j++){// 记录撤销的操作 往记录撤销数组中添加数据if(this.falseList.length !== 0){if(this.falseList.indexOf(this.resultList[i])=== -1){this.falseList.push(this.resultList[j]);}}if(this.falseList.length === 0){this.falseList.push(this.resultList[j]);}// 记录选中的相关操作 撤销时，删除已选中的数组中的取消的数据的删除if(this.trueList.length !==0){for(var n = 0; n<this.trueList.length;n++){if(this.trueList[n].id === this.resultList[j].id){this.trueList.splice(n,1);}}}}}},// 选中数据操作onSelect:function(rows,row){this.indeterminate = true ;var selected = rows.length && rows.indexOf(row) !== -1var lenFalse = this.falseList.lengthvar lenTrue = this.trueList.lengthif(selected){// 选中// 对记录撤销选中的计算 falseListif(lenFalse !== 0){for(var i=0;i<lenFalse;i++){if(this.falseList[i].id === row.id){this.falseList.splice(i,1);break}}}// 对记录选中的数据的计算 trueListif( lenTrue !=0){if(this.trueList.indexOf(row.id) === -1){this.trueList.push(row);}}if(lenTrue ==0){this.trueList.push(row);}}else{// 取消 falseListthis.falseList.push(row);// trueList 操作for(var i=0;i<lenTrue;i++){if(this.trueList[i].id===row.id){this.trueList.splice(i,1);break}}}},// 数据合并并去重  arr [{id:'',value:''},...]mergeArrayRelaseSame: function(arr1,arr2){var mergeArray = arr1.concat(arr2);var newArray = [] ; //存放去重后的数据的新数组for(var i=0;i<mergeArray.length;i++){var item1 = mergeArray[i];var flag = true ;for(var j=0;j<newArray.length;j++){var item2 = newArray[j];if(item1.id == item2.id){flag = false ;}}if(flag){newArray.push(item1);}}return newArray ;},

以上仅仅为关键点的代码。源码代码路径为：

https://github.com/zhao0215/echotable

ps:欢迎转载，转载请标明本文章原文地址。

window.open()弹框页面交互+表格数据回显以及跨页回显相关推荐

《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
Vue开发实战十六：自定义弹框页面
文章目录 1.最终效果预览 2.主页面布局 3.主页面逻辑的实现 4.单选弹框dialog-radio.vue 5.弹框密码修改change-pass-word.vue 1.最终效果预览 2.主页面布 ...
HTML展示Excel表格数据（支持多sheet页、ie浏览器、xls、xlsx）
HTML展示Excel表格数据 xlsx.js插件使用 1.引入 xlsx.js插件 2.添加div标签 3.展示div上如果 ie 前台控制台显示不支持Slice对象,解决办法: xlsx.js插 ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
Latex中表格过长如何实现跨页表格——跨页表格宏包longtable的使用？
先看效果图如下所示: latex中表格跨页,需要用到超级表格,常用的超级表格有 supertabular 和 longtable 宏包.下面介绍longtable 的使用. 直接附上可在texlive ...
layui穿梭框和layui表格数据交互
<style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...
miniui单元格点击弹框_miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题...
最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. autoload="true" ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...

window.open()弹框页面交互+表格数据回显以及跨页回显

window.open()弹框页面交互+表格数据回显以及跨页回显相关推荐

最新文章

热门文章