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

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

});

}

}

}