1.效果图
2.实现代码
@selection-change当选择项发生变化时会触发该事件
:data="tableData" height="65vh" border ref="tableLeft" :row-key="getRowKeys" > type="selection" :reserve-selection="true" width="55" > align="center" show-overflow-tooltip v-for="(item,oks) in tableLabel" :key="oks" :label="item.label" :min-width="item.width ? item.width : 118" > {{scope.row[item.prop]}}
:data="selectedStaffList" height="65vh" border ref="tableRight" :row-key="getRowKeys" @selection-change="handleSelectedStaffChange" > type="selection" :reserve-selection="true" width="55" > align="center" show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label" :min-width="item.width ? item.width : 118" > {{scope.row[item.prop]}}
export default {
data(){
return{
tableData: [
{
fnumber:'56-01-01',
corptype:'无',
corpte:'广东xxx国际xxx公司',
corppe: '李xx',
crptype11:'xx省xx市xx镇',
id: 1,
},
{
fnumber:'56-02-02',
corptype:'无',
corpte:'福建xxx国际xxx公司',
corppe: '何xx',
crptype11:'xx省xx市xx镇',
id: 2,
},
{
fnumber:'56-03-03',
corptype:'无',
corpte:'广西xxx国际xxx公司',
corppe: '陈xx',
crptype11:'xx省xx市xx镇',
id: 3,
},
{
fnumber:'56-04-04',
corptype:'无',
corpte:'江西xxx国际xxx公司',
corppe: '林xx',
crptype11:'xx省xx市xx镇',
id: 4,
},
{
fnumber:'56-05-05',
corptype:'有',
corpte:'山西xxx国际xxx公司',
corppe: '马xx',
crptype11:'xx省xx市xx镇',
id: 5,
}
],
selectedStaffList: [],
selectedStaffData: [],
tableLabel: [ //对应table表格字段,名称,宽度
{
prop:"fnumber",
label:"档号",
width: 110,
},
{
prop:"corptype",
label:"案卷题名",
width: 90,
},
{
prop:"corpte",
label:"企业名称",
width: 110,
},
{
prop:"corppe",
label:"法人代表",
width: 110,
},
{
prop:"crptype11",
label:"企业地址",
width: 110,
},
],
}
},
methods:{
getRowKeys(){
},
//将右边表格选择项存入selectedStaffData中
handleSelectedStaffChange(rows) {
this.selectedStaffData = [];
if (rows) {
rows.forEach((row) => {
if (row) {
this.selectedStaffData.push(row);
}
});
}
},
//左到右
Right(){
console.log('左表格数据',this.$refs.tableLeft.selection);
if (this.$refs.tableLeft.selection.length === 0) {
this.$notify({
title: "提示",
message: "请选择xxxxx",
type: "success",
duration: 2000,
});
return;
} else {
this.selectedStaffList = this.selectedStaffList.concat( this.$refs.tableLeft.selection );
// 复制数组对象
let selectList = JSON.parse(
JSON.stringify(this.$refs.tableLeft.selection)
);
selectList.forEach((item) => {
let index = this.tableData.findIndex((_item) => _item.id === item.id);
if (index !== undefined) {
this.tableData.splice(index, 1);
}
});
this.$refs.tableLeft.clearSelection();
}
},
//右到左
Left(){
setTimeout(() => {
this.$refs["tableLeft"].clearSelection();
this.$refs["tableRight"].clearSelection();
}, 0);
this.selectedStaffData.forEach((item) => {
this.tableData.push(item);
});
// console.log(22,this.selectedStaffList );
// console.log(33,this.selectedStaffData );
let arr = this.selectedStaffList.filter((v) => this.selectedStaffData.every((val) => val.id!= v.id))
console.log('--111',arr)
this.selectedStaffList = arr
},
}
}
.box_cm {
display: flex;
}
.box_cm .box_cm_list {
width: 48%;
height:65vh;
}
.box_cm .box_cm_list_cm {
width: 6%;
height: 65vh;
text-align: center;
padding-top: 14vh;
}
.box_cm .box_cm_list_cm div {
line-height: 14vh;
}
//仅供参考,如有雷同,纯属虚构
参考链接
发表评论