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);
}
}
}
}
},
