前言

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

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

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

思路梳理

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

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

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

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

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

這么多細(xì)節(jié)問題，產(chǎn)品經(jīng)理咋不講清楚寫明白呢，噴他！

帶著問題找產(chǎn)品經(jīng)理確認(rèn)，結(jié)果產(chǎn)品經(jīng)理說他也沒想到還有這么好些情況

和產(chǎn)品經(jīng)理一波 battle 后的結(jié)果

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

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

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

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

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

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

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

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

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

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

表格數(shù)據(jù)行拖動這個(gè)原生實(shí)現(xiàn)就不考慮了，時(shí)間代價(jià)有點(diǎn)高，一般找個(gè) npm 庫就行，目前不錯(cuò)的拖拽庫有 Sortable.js 官方有 Vue 版 Vue.Draggable ，因?yàn)橥蟿有枨蟊容^簡單，發(fā)現(xiàn)一個(gè)更好用的庫，我用的這個(gè) el-table-draggable ，這個(gè)庫的作者基于 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 必須設(shè)置，否則無法拖拽。

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

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

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

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

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

注意！

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

演示代碼地址

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

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

最新評論