vue中el-table實現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)

更新時間：2023年06月29日 10:55:43 作者：程序媛ly

本文主要介紹了vue中el-table實現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.要求實現(xiàn)的頁面樣式

2.技術(shù)分析

左右穿梭框用el-table展示數(shù)據(jù)
實現(xiàn)左右按鈕的點夾效果，向相應(yīng)的列表中添加選中的元素
在右側(cè)的table表格中，需要實現(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="序號" 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="序號" 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ù)填充

后臺請求數(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ù)，動態(tài)添加是否禁用的效果：

:disabled="nowSelectLeftData.length?false:true"
:disabled="nowSelectRightData.length?false:true"

按鈕的點擊事件：

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中拼接兩個數(shù)組元素的值：

// 拼接值  concat方法用于連接兩個或多個數(shù)組。
// concat需要一個新的數(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)識當(dāng)前的位置，count標(biāo)識移除的個數(shù)
              }
            }
          }
        }
      },

5.表格中數(shù)據(jù)上移

實現(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>

// 按鈕上移動作
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.后臺提交數(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ù)提交到后臺
                  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實現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)的文章就介紹到這了,更多相關(guān)el-table 穿梭框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: