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 !='' ){
debugger
if(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', '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-table
ref="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-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
<el-table-column
prop="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-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="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-falseList
var 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) !== -1
var lenFalse = this.falseList.length
var lenTrue = this.trueList.length
if(selected)
{
// 选中
// 对记录撤销选中的计算 falseList
if(lenFalse !== 0)
{
for(var i=0;i<lenFalse;i++)
{
if(this.falseList[i].id === row.id)
{
this.falseList.splice(i,1);
break
}
}
}
// 对记录选中的数据的计算 trueList
if( lenTrue !=0)
{
if(this.trueList.indexOf(row.id) === -1)
{
this.trueList.push(row);
}
}
if(lenTrue ==0)
{
this.trueList.push(row);
}
}
else
{
// 取消 falseList
this.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:欢迎转载，转载请标明本文章原文地址。