<template>
<div>
<div class="test">
<el-button type = "primary" @click="handleclick">默认按钮</el-button>
</div>
<div class="testa">
<div class="mainaq"></div>
</div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="35%"
:before-close="handleClose">
<div class="main">
<div class="leftblock">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
</div>
<div>
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="item in leftData" :label="item" :key="item">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</el-card>
</div>
<div class="minbtn">
<div class="btns">
<div><el-button icon="el-icon-d-arrow-right" circle @click="changeclick('allright')"></el-button></div>
<div><el-button icon="el-icon-arrow-right" circle @click="changeclick('right')"></el-button></div>
<div><el-button icon="el-icon-d-arrow-left" circle @click="changeclick('allleft')"></el-button></div>
<div><el-button icon="el-icon-arrow-left" circle @click="changeclick('left')"></el-button></div>
</div>
</div>
<div class="rightblock">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
</div>
<div >
<el-checkbox-group v-model="checkLists">
<el-checkbox v-for="item in rightData" :label="item" :key="item">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</el-card>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return{
dialogVisible:false,
checkList: [],
checkLists:[],
tableData1: [{
name: '哈哈哈',
province: '上海',
city: '普陀区',
zip: 200333
}, {
name: '小虎',
province: '上海',
city: '普陀区',
zip: 254254
}, {
name: '王虎',
province: '上海',
city: '普陀区',
zip:254200
}, {
name: '王小',
province: '上海',
city: '普陀区',
zip: 852824
}, {
name: '鬼地方',
province: '上海',
city: '普陀区',
zip: 782043
}, {
name: '王小',
province: '上海',
city: '普陀区',
zip: 365453
}, {
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200533
},
{
name: '王都是',
province: '上海',
city: '普陀区',
zip: 257427
},
{
name: '复旦复华',
province: '上海',
city: '普陀区',
zip: 368552
},
{
name: '广告',
province: '上海',
city: '普陀区',
zip: 741258
}
],
tableData: [{
cname: '哈哈哈',
city: '普陀区',
ip: 200333
}, {
cname: '小虎',
city: '普陀区',
ip: 254254
}, {
cname: '王虎',
city: '普陀区',
ip:254200
}, {
cname: '王小',
city: '普陀区',
ip: 852824
}
],
leftData:[],
rightData:[],
value:['re','fdsfds','gfgvf','rtrgrgr','ccdddd','vdvfvf','fsgdfss','gfdgfdgd',
'dfcdcdv','gfvfvf','dcd dv','cdcdcc','dvfvfdfv','cdcdcd','fgdxvdx','ghfdfgd'],
value1:['re','fdsfds','gfgvf','rtrgrgr','ccdddd','vdvfvf','fsgdfss'
]
}
},
methods:{
// 求数组差集
difference(arr=[],oarr=[]){
return arr.reduce((t,v) => (!oarr.includes(v) && t.push(v),t),[])
},
handleclick(){
this.dialogVisible = true
if (this.tableData) {
更改对象的key
var keyMap = {
"cname" : "name",
"ip" : "zip"
};
for(var i = 0;i < this.tableData.length;i++){
var obj = this.tableData[i];
for(var key in obj){
var newKey = keyMap[key];
if(newKey){
obj[newKey] = obj[key];
delete obj[key];
}
}
}
this.tableData1 = this.tableData1.map(item =>{
delete item.province
return item
})
console.log(this.tableData1);
console.log(this.tableData);
this.rightData = this.tableData
const a = []
求俩个不同数组的交集
this.tableData1.filter(item =>{
for (const iterator of this.tableData) {
if (item.zip == iterator.zip) {
a.push(item)
}
}
console.log(a)
this.leftData = a
})
this.leftData = this.difference(this.tableData1,this.leftData)
console.log(this.leftData);
}
},
// // 数组过滤
// difference(arr=[],oarr=[]){
// return arr.reduce((t,v) => (!oarr.includes(v) && t.push(v),t),[])
// },
changeclick(type){
switch (type) {
case 'allright':
console.log('allright')
this.leftData=[]
this.rightData = this.tableData
break;
case 'right':
console.log('right')
this.rightData = this.checkList
this.leftData = this.difference(this.tableData,this.checkList)
break;
case 'allleft':
console.log('allleft')
this.rightData=[]
this.leftData = this.tableData
break;
case 'left':
console.log('left')
break;
}
}
}
}
</script>
<style scoped>
.main{
display:flex;
height: 350px;
overflow: hidden;
}
.minbtn{
width: 10%;
display: flex;
flex-direction: column;
position: relative;
}
.btns{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.leftblock{
flex: 1;
}
.rightblock{
flex: 1;
}
.el-checkbox-group{
height: 300px;
overflow: scroll;
display: flex;
flex-direction: column;
}
.testa{
position: relative;
height: 400px;
width: 200px;
background: slateblue;
margin: 0 auto;
}
.mainaq{
height: 300px;
width: 150px;
background: springgreen;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.el-button{
margin-bottom: 10px;
}
</style>
