删选

<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) {
         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>