vue中el-table实现穿梭框(数据可以上移下移)
更新时间：2023年06月29日 10:55:43 作者：程序媛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 穿梭框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目中使用bpmn-自定义platter的实例代码，本文通过代码截图相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Vue中watch与watchEffect的区别详细解读,watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue 控制元素显示隐藏的方法和区别,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于关闭eslint检查和ts检查的相关资料,eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
在本篇文章里小编给大家分享的是一篇关于vue props 单项数据流实例分享内容，需要的朋友们可以参考下。2020-02-02
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue实现菜单权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
今天小编就为大家分享一篇vue 实现边输入边搜索功能的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
有时候我们使用el-table的选择框时,如果涉及修改、删除时,可能一次只允许用户选择一条,这样的话如果使用顶部的全选复选框就不合适了,这篇文章主要给大家介绍了关于el-table表头全选框隐藏或禁用设置的相关资料,需要的朋友可以参考下2023-09-09
本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能，文中给大家补充介绍了vue实现密码显示隐藏切换功能，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧2018-05-05
最新评论