vue中el-table实现穿梭框(数据可以上移下移)
作者：程序媛ly
本文主要介绍了vue中el-table实现穿梭框(数据可以上移下移)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1.要求实现的页面样式
2.技术分析
- 左右穿梭框用el-table展示数据
- 实现左右按钮的点夹效果，向相应的列表中添加选中的元素
- 在右侧的table表格中，需要实现数据上移、下移的效果
3.代码展示
左侧el-table展示：
<el-col :span="11"> <el-alert title="工序列表" type="info" :closable="false"></el-alert> <el-table :data="dataLeft" border size="small" ref="selectionLeft" @selection-change="checkLeftAll" style="width: 100%"> <el-table-column type="selection" width="30"></el-table-column> <el-table-column type="index" label="序号" width="70" align="center" </el-table-column> <el-table-column prop="processId" label="工序代码" align="center"></el-table-column> <el-table-column prop="processName" label="工序名称" align="center"></el-table-column> </el-table> </el-col>
中间按钮的事件：
<el-col :span="2" style="text-align:center;">
<div>
<el-button @click="handelSelect" icon="el-icon-arrow-right" circle style="margin-left: 0px;margin-top: 30px;" :disabled="nowSelectLeftData.length?false:true" type="primary" ></el-button>
</div>
<div>
<el-button @click="handleRemoveSelect" icon="el-icon-arrow-left" circle style="margin-left: 0px;margin-top: 20px;" :disabled="nowSelectRightData.length?false:true" type="primary"></el-button>
</div>
</el-col>右侧table：
<el-col :span="11">
<el-alert title="已选工序列表" type="info" :closable="false"></el-alert>
<el-table :data="dataRight" border ref="selectionRight" @selection-change="checkRightAll" size="small" style="width: 100%">
<el-table-column type="selection" width="30"></el-table-column>
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
<el-table-column prop="processId" label="工序代码" align="center"></el-table-column>
<el-table-column prop="processName" label="工序名称" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
plain
:disabled="scope.$index===0"
@click="moveUp(scope.$index,scope.row)"><i class="el-icon-top"></i></el-button>
<el-button
size="mini"
type="primary"
plain
:disabled="scope.$index===(dataRight.length-1)"
@click="moveDown(scope.$index,scope.row)"><i class="el-icon-bottom"></i></el-button>
</template>
</el-table-column>
</el-table>
</el-col>4.数据填充
后台请求数据填充左侧列表：
// 左侧数据填充
getProcessListFun(){
getProcessList().then((res) =>{
this.dataLeft = res.data.data;
})
},
// 左边选中得数据 nowSelectLeftData：[]
checkLeftAll(val){
this.nowSelectLeftData = val;
}, 中间的按钮，根据选中的数据，动态添加是否禁用的效果：
:disabled="nowSelectLeftData.length?false:true" :disabled="nowSelectRightData.length?false:true"
按钮的点击事件：
handelSelect(){
// 合并右侧数组 + 现在已经选中的左侧的数据
this.dataRight = this.handleConcatArr(this.dataRight,this.nowSelectLeftData);
// 从左侧数据dataLeft中移除掉被选中的元素
this.handleRemoveTabList(this.nowSelectLeftData,this.dataLeft);
// 将左侧选中的数据制空
this.nowSelectLeftData = [];
},// 从右向左
handleRemoveSelect(){
this.dataLeft = this.handleConcatArr(this.dataLeft, this.nowSelectRightData);
this.handleRemoveTabList(this.nowSelectRightData, this.dataRight);
this.nowSelectRightData = [];
},js中拼接两个数组元素的值：
// 拼接值 concat方法用于连接两个或多个数组。
// concat需要一个新的数组去接收
handleConcatArr(dataRight, nowSelectLeftData) {
let arr = [];
arr = arr.concat(dataRight, nowSelectLeftData);
return arr;
},将要勾选的元素进行移除：splice
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]["processId"] === originalArr[k]["processId"]) {
originalArr.splice(k, 1); //splice(start,count) start标识当前的位置，count标识移除的个数
}
}
}
}
},5.表格中数据上移
实现上移、下移需要在操作栏中，添加按钮事件
// 通过按钮的下标，通带控制按钮是否禁用
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="primary"
plain
:disabled="scope.$index===0"
@click="moveUp(scope.$index,scope.row)"><i class="el-icon-top"></i></el-button>
<el-button size="mini"
type="primary"
plain
:disabled="scope.$index===(dataRight.length-1)"
@click="moveDown(scope.$index,scope.row)"><i class="el-icon-bottom"></i></el-button>
</template>
</el-table-column>// 按钮上移动作
moveUp(index){
let that = this;
if (index > 0) {
let upDate = that.dataRight[index - 1];
that.dataRight.splice(index - 1, 1);
that.dataRight.splice(index, 0, upDate);
} else {
alert('已经是第一条，不可上移');
}
},
// 按钮下移
moveDown(index){
let that = this;
if ((index + 1) === that.dataRight.length){
alert('已经是最后一条，不可下移');
} else {
let downDate = that.dataRight[index + 1];
that.dataRight.splice(index + 1, 1);
that.dataRight.splice(index,0, downDate);
}
},6.后台提交数据记录
addProductSave(formName){
this.$refs[formName].validate((valid) =>{
if(valid){
let formValue = this.$refs.addFormRef.form;
let processListTable = this.$refs.selectionRight.tableData;
let processObject = [];
if (processListTable.length > 0) {
for (let i = 0; i <processListTable.length ; i++) {
let process = new Object();
process.processId = processListTable[i].id;
// 记录各道工序的顺序，将数据提交到后台
process.processOrder = i+1;
processObject.push(process);
}
}
let form = {"product":formValue};
let processArr = {"processListOrder": processObject};
const productAndProcessList = Object.assign(form,processArr);
saveProduct(productAndProcessList).then(() =>{
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.addBox = false;
})
}
})
},到此这篇关于vue中el-table实现穿梭框(数据可以上移下移)的文章就介绍到这了,更多相关el-table 穿梭框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！