vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
更新時(shí)間：2023年06月29日 10:55:43 作者：程序媛ly
本文主要介紹了vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.要求實(shí)現(xiàn)的頁面樣式
2.技術(shù)分析
- 左右穿梭框用el-table展示數(shù)據(jù)
- 實(shí)現(xiàn)左右按鈕的點(diǎn)夾效果，向相應(yīng)的列表中添加選中的元素
- 在右側(cè)的table表格中，需要實(shí)現(xiàn)數(shù)據(jù)上移、下移的效果
3.代碼展示
左側(cè)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="序號(hào)" 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>右側(cè)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="序號(hào)" 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.數(shù)據(jù)填充
后臺(tái)請(qǐng)求數(shù)據(jù)填充左側(cè)列表：
// 左側(cè)數(shù)據(jù)填充
getProcessListFun(){
getProcessList().then((res) =>{
this.dataLeft = res.data.data;
})
},
// 左邊選中得數(shù)據(jù) nowSelectLeftData：[]
checkLeftAll(val){
this.nowSelectLeftData = val;
}, 中間的按鈕，根據(jù)選中的數(shù)據(jù)，動(dòng)態(tài)添加是否禁用的效果：
:disabled="nowSelectLeftData.length?false:true" :disabled="nowSelectRightData.length?false:true"
按鈕的點(diǎn)擊事件：
handelSelect(){
// 合并右側(cè)數(shù)組 + 現(xiàn)在已經(jīng)選中的左側(cè)的數(shù)據(jù)
this.dataRight = this.handleConcatArr(this.dataRight,this.nowSelectLeftData);
// 從左側(cè)數(shù)據(jù)dataLeft中移除掉被選中的元素
this.handleRemoveTabList(this.nowSelectLeftData,this.dataLeft);
// 將左側(cè)選中的數(shù)據(jù)制空
this.nowSelectLeftData = [];
},// 從右向左
handleRemoveSelect(){
this.dataLeft = this.handleConcatArr(this.dataLeft, this.nowSelectRightData);
this.handleRemoveTabList(this.nowSelectRightData, this.dataRight);
this.nowSelectRightData = [];
},js中拼接兩個(gè)數(shù)組元素的值：
// 拼接值 concat方法用于連接兩個(gè)或多個(gè)數(shù)組。
// concat需要一個(gè)新的數(shù)組去接收
handleConcatArr(dataRight, nowSelectLeftData) {
let arr = [];
arr = arr.concat(dataRight, nowSelectLeftData);
return arr;
},將要勾選的元素進(jìn)行移除：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標(biāo)識(shí)當(dāng)前的位置，count標(biāo)識(shí)移除的個(gè)數(shù)
}
}
}
}
},5.表格中數(shù)據(jù)上移
實(shí)現(xiàn)上移、下移需要在操作欄中，添加按鈕事件
// 通過按鈕的下標(biāo)，通帶控制按鈕是否禁用
<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>// 按鈕上移動(dòng)作
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('已經(jīng)是第一條，不可上移');
}
},
// 按鈕下移
moveDown(index){
let that = this;
if ((index + 1) === that.dataRight.length){
alert('已經(jīng)是最后一條，不可下移');
} else {
let downDate = that.dataRight[index + 1];
that.dataRight.splice(index + 1, 1);
that.dataRight.splice(index,0, downDate);
}
},6.后臺(tái)提交數(shù)據(jù)記錄
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;
// 記錄各道工序的順序，將數(shù)據(jù)提交到后臺(tái)
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;
})
}
})
},到此這篇關(guān)于vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)的文章就介紹到這了,更多相關(guān)el-table 穿梭框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue預(yù)覽 pdf、word、xls、ppt、txt文件的實(shí)現(xiàn)方法
這篇文章主要介紹了vue預(yù)覽 pdf、word、xls、ppt、txt文件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題
今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
虛擬列表是一種優(yōu)化長列表渲染的技術(shù),它可以在保持流暢性的同時(shí),渲染大量的數(shù)據(jù),本文主要介紹了如何通過Vue3實(shí)現(xiàn)一個(gè)虛擬列表,感興趣的可以了解下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用)
這篇文章主要介紹了vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用),實(shí)現(xiàn)思路是點(diǎn)擊發(fā)送驗(yàn)證碼，驗(yàn)證碼倒計(jì)時(shí)，校驗(yàn)手機(jī)號(hào)是否正常等一系列操作，本文通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例
這篇文章主要介紹了vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04