vue 表格穿梭

image.png

选中之后鼠标离开触发事件，穿梭到左或右

                   <!-- 左边表格 -->
                                              <el-table
                                                  ref="staffTable"    :key="tableKey"  :data="staffList" border fit   highlight-current-row >
                                                  <!-- <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> -->
                                                  <el-table-column  align="center" label="材料名" >
                                                    <template slot-scope="scope">
                                                    <div  style="    display: flex;  line-height: 50px;"  >
                                                      <div class="demo-image__preview">
                                                        <el-image style="width: 50px; height: 50px"  :src="urla" :preview-src-list="srcList"> </el-image>
                                                        </div>
                                                        <div>  @{{ scope.row.phone }}</div>
                                                       </div>
                                                    </template>
                                                    </el-table-column>
                                                    <el-table-column  align="center" label="分类" >
                                                        <template slot-scope="{row,$index}">
                                                        <el-popover @after-leave=hhhii(row,$index)  placement="right"   width="400" trigger="click">
                                                            <el-checkbox-group v-model="service_id">
                                                                <el-checkbox v-for="(city,index) in service_ids" :label="index" :key="city">@{{city}}</el-checkbox>
                                                            </el-checkbox-group>
                                                            <el-button slot="reference">click 激活</el-button>
                                                        </el-popover>
                                                        </template>
                                                    </el-table-column>
                                              </el-table>

   <!-- 右边表格 -->
     <el-table     ref="selectedStaffTable"      :data="selectedStaffList"  border fit    highlight-current-row  >
                                                  <!-- <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> -->
                                                  <el-table-column  align="center" label="材料名" >
                                                    <template slot-scope="scope">
                                                        <div  style="    display: flex;  line-height: 50px;"  >
                                                        <div class="demo-image__preview">
                                                        <el-image
                                                            style="width: 50px; height: 50px"
                                                            :src="urla"
                                                            :preview-src-list="srcList">
                                                        </el-image>
                                                        </div>
                                                        <div>  @{{ scope.row.phone }}</div>
                                                        </div>
                                                    </template>
                                                  </el-table-column>
                                                  <el-table-column  align="center" label="分类" >
                                                    <template slot-scope="{row,$index}">
                                                        <el-popover @after-leave=secon(row,$index) placement="right" width="400" trigger="hover">
                                                        <el-checkbox-group v-model="service_id">
                                                            <el-checkbox v-for="(city,index) in service_ids" :label="index" :key="city">@{{city}}</el-checkbox>
                                                        </el-checkbox-group>
                                                        <el-button slot="reference">材料</el-button>
                                                        </el-popover>
                                                    </template>
                                                    </el-table-column>
                                              </el-table>
                                          </el-col>

 hhhii(row,index){//材料左边表格
                        console.log(this.service_id)
                        if(this.service_id!=''){
                            console.log("this.service_id!=''")
                        this.staffDatas = [];
                        this.staffDatas.push(row);
                        console.log("staffDatas",this.staffDatas);
                        let repeat = false;
                            this.selectedStaffList.forEach(item => {
                              if (this.staffDatas[0] && item.phone === this.staffDatas[0].phone) {
                                repeat = true;
                                alert("此员工已添加");
                                return;
                              }
                            });
                            if (repeat === false) {
                              this.staffDatas.forEach(item => {
                                this.selectedStaffList.push(item);
                              });
                              for (let i = 0; i < this.staffList.length; i++) {
                                for (let j = 0; j < this.staffDatas.length; j++) {
                                  if (
                                    this.staffList[i] &&
                                    this.staffDatas[j] &&
                                    this.staffList[i].phone === this.staffDatas[j].phone
                                  ) {
                                    this.staffList.splice(i, 1);
                                  }
                                }
                              }
                            }

                        }
                     
                    },
                secon(row,index){//右边
                    console.log(row)
                    this.selectedStaffData = [];
                    this.selectedStaffData.push(row);
                    if(this.service_id==''){
                        console.log("00000000")
                        setTimeout(() => {
                        this.$refs["staffTable"].clearSelection();
                        this.$refs["selectedStaffTable"].clearSelection();
                        }, 0);
                        this.selectedStaffData.forEach(item => {
                        this.staffList.push(item);
                        });
                        for (let i = 0; i < this.selectedStaffList.length; i++) {
                        for (let j = 0; j < this.selectedStaffData.length; j++) {
                            if (
                            this.selectedStaffList[i] &&
                            this.selectedStaffData[j] &&
                            this.selectedStaffList[i].phone === this.selectedStaffData[j].phone
                            ) {
                            this.selectedStaffList.splice(i, 1);
                            }
                        }
                        } 
                }
                },