如图所示:
页面布局
<template>
<el-dialog
top="15vh"
width="80%"
:visible.sync="visible"
:append-to-body="true"
@close="visible = false"
destroy-on-close="true"
>
<div style="height: 400px">
<el-form ref="searchForm" :inline="true" label-width="100px" size="small" :model="queryParams" class="demo-form-inline">
<el-row style="margin-bottom: 10px">
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="关键字" prop="gjz">
<el-input
v-model="ry.number"
placeholder="关键字"
clearable
size="small"
/>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" style="text-align: right;padding-top: 10px">
<span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px;cursor: pointer" > 查询</span>
</el-col>
</el-row>
</el-form>
<el-row>
<el-col :span="10">
<el-table
:data="data1"
border
height="300px"
ref="selection"
@selection-change="checkAll"
style="width: 100%">
<el-table-column
type="selection"
width="30">
</el-table-column>
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="账号"
width="120"
>
</el-table-column>
<el-table-column
prop="address"
label="注册日期"
>
</el-table-column>
</el-table>
</el-col>
<el-col :span="4">
<div class="opSetting">
<div @click="handelSelect">
<el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
选中
</el-button>
</div>
<div class="spacing" @click="handleRemoveSelect">
<el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
取消
</el-button>
</div>
</div>
</el-col>
<el-col :span="10">
<el-table
:data="selectArr"
border
height="300px"
ref="selection"
@selection-change="checkRightAll"
style="width: 100%">
<el-table-column
type="selection"
width="30">
</el-table-column>
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="账号"
width="120"
>
</el-table-column>
<el-table-column
prop="address"
label="注册日期"
>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row style="margin-top:10px ">
<el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
</el-col>
<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="text-align: center;cursor: pointer">
<span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px" > 确定</span>
</el-col>
<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="text-align: center;cursor: pointer;">
<span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px" > 关闭</span>
</el-col>
</el-row>
</div>
</el-dialog>
</template>
js文件
checkAll(val){
this.nowSelectData = val;
},
checkRightAll(val) {
this.nowSelectRightData = val;
},
// 选中
handelSelect(){
debugger
//右边的数组和左边的数组进行连接
this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
//删除左边数组中的元素
this.handleRemoveTabList(this.nowSelectData, this.data1);
this.nowSelectData = [];
},
// 取消
handleRemoveSelect() {
this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData)
this.handleRemoveTabList(this.nowSelectRightData, this.selectArr);
this.nowSelectRightData = [];
},
handleConcatArr(selectArr, nowSelectData) {
let arr = [];
arr = arr.concat(selectArr, nowSelectData);
return arr;
},
//在全局中删除被选中的元素
handleRemoveTabList(isNeedArr, originalArr) {
//如果两个数组都不为空
if(isNeedArr.length && originalArr.length) {
for(let i=0; i<isNeedArr.length; i++) {
for(let k=0; k<originalArr.length; k++) {
debugger
if(isNeedArr[i]["name"] === originalArr[k]["name"]) {
originalArr.splice(k, 1);
}
}
}
}
},
init (){
this.visible=true
}
},