关于如何使用ElementUI的table组件来实现自定义穿梭框的效果

• 话不多说，先上图
  
• 以上就是基于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>