vue2.0 + element ui 实现表格穿梭框

<el-form :inline="true" :model="staffTemp">
<el-form-item label="手机号">
<el-input v-model="staffTemp.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getStaffList">查找</el-button>
</el-form-item>
</el-form>
<el-row :gutter="20">
<el-col :span="11">
<el-table
ref="staffTable"
v-loading="listLoading"
:key="tableKey"
:data="staffList"
border
fit
highlight-current-row
@selection-change="handleStaffChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="手机" align="center">
<template slot-scope="{row}">
<span>{{ row.phone }}</span>
</template>
</el-table-column> <el-table-column label="昵称" align="center">
<template slot-scope="{row}">
<span>{{ row.nickName }}</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="2" style="text-align:center;">
<el-button
@click="addStaff"
type="primary"
:disabled="!staffData.length"
icon="el-icon-arrow-right"
circle
></el-button>
<el-button
@click="removeStaff"
type="primary"
:disabled="!selectedStaffData.length"
icon="el-icon-arrow-left"
circle
style="margin-left: 0;margin-top: 10px;"
></el-button>
</el-col>
<el-col :span="11">
<el-table
ref="selectedStaffTable"
v-loading="listLoading"
:key="tableKey"
:data="selectedStaffList"
border
fit
highlight-current-row
@selection-change="handleSelectedStaffChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="手机" align="center">
<template slot-scope="{row}">
<span>{{ row.phone }}</span>
</template>
</el-table-column> <el-table-column label="昵称" align="center">
<template slot-scope="{row}">
<span>{{ row.nickName }}</span>
</template>
</el-table-column> <el-table-column label="类型" align="center">
<template slot-scope="{row}">
<el-select class="filter-item" placeholder="请选择" v-model="row.staffTypeId">
<el-option
v-for="item in staffOptions"
:key="item.key"
:label="item.display_name"
:value="item.key"
></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>

data() {
return {
listLoading: true,
staffTemp: {
phone: "",
nickName: "",
staffTypeId: ""
},
staffList: [],
selectedStaffList: [],
staffData: [],
selectedStaffData: [],
tableKey: 0,
rowKey: "rowKey",
staffOptions: [
{ key: 28, display_name: "补货员" },
{ key: 29, display_name: "测试员" }
],
}
},
methods: {
// 从后台获取左边表格的数据
getStaffList() {
fetchStaffList(this.staffTemp).then(res => {
if (res.value.staff.length === 0) {
alert("查无此人");
}
this.staffList = res.value.staff;
});
},
// 将左边表格选择项存入staffData中
handleStaffChange(rows) {
this.staffData = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.staffData.push(row);
}
});
}
},
// 左边表格选择项移到右边
addStaff() {
setTimeout(() => {
this.$refs["staffTable"].clearSelection();
this.$refs["selectedStaffTable"].clearSelection();
}, 0);
let repeat = false;
this.selectedStaffList.forEach(item => {
if (this.staffData[0] && item.phone === this.staffData[0].phone) {
repeat = true;
alert("此员工已添加");
return;
}
});
if (repeat === false) {
this.staffData.forEach(item => {
this.selectedStaffList.push(item);
});
for (let i = 0; i < this.staffList.length; i++) {
for (let j = 0; j < this.staffData.length; j++) {
if (
this.staffList[i] &&
this.staffData[j] &&
this.staffList[i].phone === this.staffData[j].phone
) {
this.staffList.splice(i, 1);
}
}
}
}
},
// 右边表格选择项移到左边
removeStaff() {
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);
}
}
}
},
// 将右边表格选择项存入selectedStaffData中
handleSelectedStaffChange(rows) {
this.selectedStaffData = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.selectedStaffData.push(row);
}
});
}
},
// 提交
modifyStaff() {
let isEmpty = false;
this.selectedStaffList.forEach(item => {
if (!item.staffTypeId) {
alert("请选择类型");
isEmpty = true;
return;
}
});
if (isEmpty === false) {
editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {
this.staffListVisible = false;
this.$notify({
title: "成功",
message: "修改成功",
type: "success",
duration: 2000
});
});
}
}
}