- 话不多说,先上图
- 以上就是基于ElementUI的table组件实现的穿梭框效果,可以选中左右任意的列进行添加和移除,那么是如何实现的呢?我们也直接上代码吧!
//html:
<template>
<div class="jldlist">
<el-col :span="10">
<el-table :data="departmentAndMeterData" border ref="selection" @selection-change="checkAll" style="width: 100%" :header-cell-style="tableHeaderColor">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="meter_name" label="选中部门所属计量点" ></el-table-column>
</el-table>
</el-col>
<el-col :span="4">
<div class="opSetting">
<div @click="handelSelect">
<el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
移除
</el-button>
</div>
<div class="spacing" @click="handleRemoveSelect">
<el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
添加
</el-button>
</div>
</div>
</el-col>
<el-col :span="10">
<el-table :data="tables" border ref="selection" @selection-change="checkRightAll" style="width: 100%" :header-cell-style="tableHeaderColor">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="meter_name" label="非选中部门计量点" ></el-table-column>
</el-table>
</el-col>
</div>
</template>
//js:
<script>
export default {
name:"Bmyjldcz",
data() {
return {
buttonSize: 'large',
nowSelectData: [], // 左边选中列表数据
nowSelectRightData: [], // 右边选中列表数据
departmentAndMeterData:[],//选中部门计量点(数据格式自定义或者从后台获取)
otherMeterData:[] //非选中部门计量点(数据格式自定义或者从后台获取)
}
},
methods:{
tableHeaderColor({ row, column, rowIndex, columnIndex }) { //改表头颜色
if (rowIndex === 0) {
return 'background-color: #F3F3F3;color: #666;'
}
},
checkAll(val){
this.nowSelectData = val;
},
checkRightAll(val) {
this.nowSelectRightData = val;
},
// 移除
handelSelect(){
this.otherMeterData = this.handleConcatArr(this.otherMeterData, this.nowSelectData);
this.handleRemoveTabList(this.nowSelectData, this.departmentAndMeterData);
this.nowSelectData = [];
},
// 添加
handleRemoveSelect() {
this.departmentAndMeterData = this.handleConcatArr(this.departmentAndMeterData, this.nowSelectRightData);
this.handleRemoveTabList(this.nowSelectRightData, this.otherMeterData);
this.nowSelectRightData = [];
},
handleConcatArr(a,b) {
let arr = [];
arr = arr.concat(a,b);
return arr;
},
handleRemoveTabList(isNeedArr, originalArr) {
if(isNeedArr.length && originalArr.length) {
for(let i=0; i<isNeedArr.length; i++) {
for(let k=0; k<originalArr.length; k++) {
if(isNeedArr[i]["id"] === originalArr[k]["id"]) {
originalArr.splice(k, 1);
}
}
}
}
},
}
}
</script>