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-router 实现导航守卫（路由卫士）的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
本篇文章主要介绍了Vue.js 2.0 如何使用axios，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
vue中$refs, $emit, $on, $once, $off的使用详解
这篇文章主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了vue-router动态路由实现前端权限管理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁，这篇文章主要介绍了详解Vue中keep-alive的使用,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错，这篇文章主要介绍了Vue中关于this指向的问题 ,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue-cli启动本地服务，局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目 用localhost可以访问，但是切换到ip就不可以访问 的原因，本文给大家介绍的非常详细，需要的朋友参考下2018-01-01
最新评论