<el-row :gutter="20" class="mt-20">
<el-col :span="11">
<el-table
:row-key="getRowKey"
ref="staffTable"
v-loading="listLoading"
: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="1" 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
:row-key="getRowKey"
ref="selectedStaffTable"
v-loading="listLoading"
: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>
</el-col>
</el-row>
<el-button @click="modifyStaff()" type="primary" size="small">提交</el-button>
data() {
return {
listLoading: true,
staffTemp: {
phone: "",
nickName: "",
staffTypeId: ""
},
staffList: [
{
"phone":'12723456789',
"nickName":"dsgshrt"
},
{
"phone":'98765432',
"nickName":"dsgshrt"
}
],
selectedStaffList: [],
staffData: [],
selectedStaffData: [],
tableKey: 0,
rowKey: "rowKey",
staffOptions: [
{ key: 28, display_name: "补货员" },
{ key: 29, display_name: "测试员" }
],
}
}
getRowKey(row){
return row.id;
},
// 将左边表格选择项存入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() {
console.log("this.selectedStaffList",this.selectedStaffList)
},