前言

Element table 上下移動，聽起來是不是很簡單的需求，產品的描述也簡單：表格數(shù)據(jù)支持拖動上下移，支持通過選擇表格行數(shù)據(jù)點擊按鈕上下移。最終效果大概如下(模擬數(shù)據(jù)共7條，去除了關聯(lián)的業(yè)務操作)

Element Table 上下移最終效果（下圖）

原型評審的時候，因為內容比較多，產品經理講 Element table 上下移動時一句話就帶過了，原型功能描述也簡單。做的時候才發(fā)現(xiàn)這個功能涉及很多細節(jié)需要考慮（痛哭流涕啊～），產品給留下的坑，接下來咱們一起來捋一下，防止下次考慮不周。

思路梳理

拋開業(yè)務復雜度，只分析這一小部分的上下移功能技術層的需求實現(xiàn)思路，上下移功能分為兩種操作方式，一種是表格數(shù)據(jù)行拖動上下移；一種是復選框選中數(shù)據(jù)后，點擊上下移按鈕實現(xiàn)表格數(shù)據(jù)行移動

分析到這里的時候發(fā)現(xiàn)需求描述里面對于開發(fā)人員來講，功能描述不完善

• 問題1： 表格數(shù)據(jù)行拖動上下移，是單行拖動，還是多行拖動？
• 問題2： 通過按鈕操作上移的時候，支持多選嗎？ 單行移動還是幾行移動？
• 問題3： 如果表格支持多選后上下移，那么不連續(xù)選中后數(shù)據(jù)怎么處理？如圖

• 問題4： 如果多選的數(shù)據(jù)，非連續(xù)選中情況下，有數(shù)據(jù)已經是最下方了，如何處理邊界數(shù)據(jù)移動問題？如圖

• 問題5：如果選中的數(shù)據(jù)已經是最上或最下了，怎么移動呢？
• 問題6：如果表格數(shù)據(jù)全選，怎么移動？

這么多細節(jié)問題，產品經理咋不講清楚寫明白呢，噴他！

帶著問題找產品經理確認，結果產品經理說他也沒想到還有這么好些情況

和產品經理一波 battle 后的結果

• 問題1：表格數(shù)據(jù)單行拖動上下移

• 問題2：按鈕操作上下移，支持數(shù)據(jù)行多選，單行移動

• 問題3：表格數(shù)據(jù)不連續(xù)選中后，數(shù)據(jù)先合并，再以最靠上或靠下的數(shù)據(jù)為基礎，向上或向下移動

  • 根據(jù)選中的ID舉例，默認表格ID排序為 1234567， 如果選中ID為 346，向下移動, 在數(shù)據(jù)層先把這三個數(shù)據(jù)截出來，整合，然后再插入到 7 的后面，整個表格數(shù)據(jù)ID排序就是 1257346。

• 問題4：如果多選的數(shù)據(jù)，非連續(xù)選中情況下，有數(shù)據(jù)已經是最下方了，數(shù)據(jù)整合后，再基于最上或最下的數(shù)據(jù)為基礎向上或下移動

• 問題5：如果選中的數(shù)據(jù)已經是最上或最下了，直接上下移，不用提示

• 問題6：如果表格數(shù)據(jù)全選上下移直接提示 "不能選擇全部數(shù)據(jù)上下移"

問題清楚了開始復制粘貼，啊呸！來讓我們開始改變世界

確認完所有細節(jié)問題后，發(fā)現(xiàn)這表格數(shù)據(jù)移動功能實現(xiàn)邏輯代碼還是不少的，為什么標題說這個上下移需求不簡單呢？ 主要這一部分功能評審的時候基本沒算開發(fā)時間，和其他幾個功能整個一起評審才給1天，這時候對于我們項目組已經排好工期的狀態(tài)是不加工時的，開發(fā)人員自己加班趕進度保證項目整體進度，哎......

表格數(shù)據(jù)行拖動上下移

表格數(shù)據(jù)行拖動這個原生實現(xiàn)就不考慮了，時間代價有點高，一般找個 npm 庫就行，目前不錯的拖拽庫有 Sortable.js 官方有 Vue 版 Vue.Draggable ，因為拖動需求比較簡單，發(fā)現(xiàn)一個更好用的庫，我用的這個 el-table-draggable ，這個庫的作者基于 sortablejs 封裝了一下，在 Vue Element table 中使用更方便，只需要 <el-table-draggable> 包裹一下 el-table 就行了

import ElTableDraggable from 'el-table-draggable'

components: {
  ElTableDraggable
}

<el-table-draggable>
  <el-table
    row-key="id"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column label="ID" width="60">
      <template slot-scope="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120">
    </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
</el-table-draggable>

注意！ el-table 中的 row-key 必須設置，否則無法拖拽。

如果只是簡單實現(xiàn)一下表格數(shù)據(jù)行拖拽，讀者以后功能開發(fā)可以優(yōu)先考慮 el-table-draggable 這個庫, 能夠快速實現(xiàn)業(yè)務需求, 省下來的時間學習一會兒，看會兒掘金社區(qū)不香嗎？ ^-^

表格數(shù)據(jù)選中點擊按鈕上下移

分析點擊移動數(shù)據(jù)這里的實現(xiàn)邏輯，整個上下移動需要3個核心步驟：定位、刪除、移動。這里直接上代碼

一. 基于選中數(shù)據(jù)定位需要移動到的位置

// confirm slotIndex
let slotIndex = -1
this.tableData.forEach((item, index) => {
  if (this.multipleSelection.length > 1) {
    this.multipleSelection.forEach((v, k) => {
      if (item.id === v.id) {
        if (slotIndex === -1) {
          slotIndex = index
        } else {
          if (slotIndex < index) {
            slotIndex = index
          }
        }
      }
    })
  } else {
    this.multipleSelection.forEach((v, k) => {
      if (item.id === v.id) {
        slotIndex = index + 1
      }
    })
  }
})

二. 刪除表格中的選中數(shù)據(jù)

// delete selectedata
this.multipleSelection.forEach((item, index) => {
  this.tableData.forEach((v, k) => {
    if (item.id === v.id) {
      this.tableData.splice(k, 1)
    }
  })
})

三. 將選中的數(shù)據(jù)移入指定位置

this.tableData.splice(slotIndex, 0, this.multipleSelection)
this.tableData = this.tableData.flat()

執(zhí)行完這三個步驟后，表格數(shù)據(jù)就能按需移動了。在我們的實際項目場景中，由于表格數(shù)據(jù)內容太多，數(shù)據(jù)又都比較像，因此需要移動后的數(shù)據(jù)繼續(xù)回顯，這樣用戶能更直觀，在實際項目業(yè)務表格由于數(shù)據(jù)內容太多了，也關聯(lián)了其他業(yè)務功能操作，表格數(shù)據(jù)上下移動后選中回顯渲染是異常的，需要使用 setTimeout $nextTick() 處理一下

setTimeout(async () => {
  await this.$nextTick()
  selectionTableData.forEach(row => {
    this.$refs.table2.toggleRowSelection(row)
  })
}, 10)

注意！

表格中數(shù)據(jù)選中，選中數(shù)據(jù)的數(shù)組是按照選中操作的順序排列的，例如選中操作順序為 321, 對于頁面來講，選中的數(shù)據(jù)是 123，這時候要按照頁面的ID順序進行整體移動，還是按照選中數(shù)據(jù)的順序移動，最終效果不一樣，目前我們的功能實現(xiàn)是按照選中順序進行移動的

演示代碼地址

https://github.com/gywgithub/vue-admin-element/blob/main/src/views/Table2.vue

到此這篇關于Element table 上下移需求的實現(xiàn)的文章就介紹到這了,更多相關Element table 上下移 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論