vue開發(fā)table數(shù)據(jù)合并實現(xiàn)詳解

更新時間：2022年07月27日 09:38:52 作者：參謀總長薩博

這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

項目中的某個模塊，一個勾選表格數(shù)據(jù)，里面的行數(shù)據(jù)由于有關聯(lián)關系，需要多行數(shù)據(jù)合并，然后勾選時選中一條數(shù)據(jù)，方便進行下一步業(yè)務操作，然后產(chǎn)品經(jīng)理就指著原型上的表格，說：這里，這里, 數(shù)據(jù)需要合并......

功能需求有了，里面有個技術實現(xiàn)點 —— 表格數(shù)據(jù)合并，下面我們就來分析一下這個表格數(shù)據(jù)合并的實現(xiàn)

思路梳理

方案一 Element 官方 Table 組件數(shù)據(jù)合并

由于項目用的 Element UI 庫， Table 表格 組件剛好有現(xiàn)成的功能，官方還提供了 Demo，代碼復制過來直接改一下放到項目，這不還簡單

直接翻到 Element UI Table 組件數(shù)據(jù)合并位置看官方案例，發(fā)現(xiàn)里面用了一個 span-method 屬性

span-method	合并行或列的計算方法	Function({ row, column, rowIndex, columnIndex })	—	—

通過如下方式處理合并行或者列

<el-table
  border
  ref="multipleTable"
  :data="tableData"
  tooltip-effect="dark"
  style="width: 800px; margin: 10px 0"
  @selection-change="handleSelectionChange"
  :span-method="objectSpanMethod"
></table>
methods: {
  objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
}

通過這個函數(shù)控制 rowspan colspan 來實現(xiàn)合并，但是分析數(shù)據(jù)結(jié)構(gòu)的時候發(fā)現(xiàn)兩個點

這種方案的數(shù)據(jù)是多條數(shù)據(jù)合并成一行渲染的方式
多行數(shù)據(jù)合并后，選中行的效果還是一行一行的，不同行的選中效果不一樣

實際項目中數(shù)據(jù)格式是這樣的，表格行有對應的ID，每行數(shù)據(jù)超過20列，每列內(nèi)容部分可能還比較多，如下例子

[
  {
    id: '1',
    date: '2016-05-03',
    name: '張三',
    address: '家庭地址：上海市普陀區(qū)金沙江路'
  },
  {
    id: '1',
    date: '2016-05-03',
    name: '張三',
    address: '公司地址：北京市朝陽區(qū)金臺路'
  },
  {
    id: '2',
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀區(qū)金沙江路 1518 '
  }
]

按照這種方式的話，每次請求后端都需要返回大量數(shù)據(jù)，性能不是很好；不同的列字段還需要動態(tài)處理表格單元格的合并， span-method 里面的邏輯得寫一大坨, 這個表格合并方案在當前項目中用不是很友好

注意

Demo 里面的是靜態(tài)數(shù)據(jù)，如果是動態(tài)比較id的合并的方式， span-method 里面邏輯需要單獨處理。網(wǎng)上有很多動態(tài)對比ID數(shù)據(jù)實現(xiàn)數(shù)據(jù)行合并的實現(xiàn)，按需搜索即可，文章下面也提供了兩個實現(xiàn)參考鏈接

那還有更好的實現(xiàn)方案嗎？

方案二 Table-column Scoped Slot

首先要滿足合并行是一條數(shù)據(jù)，需要多行展示的數(shù)據(jù)通過 Table-column Slot 實現(xiàn)，寫個循環(huán)動態(tài)展示數(shù)據(jù)，如下數(shù)據(jù)格式

[
  {
    id: '1',
    date: '2016-05-03',
    name: '張三',
    address: ['家庭地址：上海市普陀區(qū)金沙江路', '公司地址：北京市朝陽區(qū)金臺路']
  },
  {
    id: '2',
    date: '2016-05-02',
    name: '王小虎',
    address: ['上海市普陀區(qū)金沙江路 1518 ']
  },
  {
    id: '3',
    date: '2016-05-02',
    name: '李四',
    address: ['廣州市xxx區(qū)']
  }
]

例如需要多行展示的列為 address, 后端返回的格式為一個數(shù)組直接遍歷使用 div 渲染

<el-table-column
  label="地址"
>
  <template slot-scope="scope">
    <div
      style=""
      v-for="(item, index) in scope.row.address"
      :key="index"
    >
        {{ item }}
    </div>
  </template>
</el-table-column>

得到如下效果

這時候并不是一個多行數(shù)據(jù)合并的效果，給 div 加個 border-bottom 樣式，順便處理一下渲染時的最后一個 div不加 border

<el-table-column
  label="地址"
  class-name="cell-control-type"
  label-class-name="cell-control-title"
>
  <template slot-scope="scope">
    <div
      style=""
      v-for="(item, index) in scope.row.address"
      :key="index"
    >
    <div
      v-if="index === scope.row.address.length - 1"
      style=""
    >
      {{ item }}
    </div>
    <div
      v-else
      style="border-bottom: 1px solid #ebeef5;"
    >
      {{ item }}
    </div>
    </div>
  </template>
</el-table-column>

這時候的表格列有邊距問題，看起來還不是一個合并的表格行，接下來我們看下表格內(nèi)置的邊距控制

通過分析 Table 的源碼，需要把對應的列的內(nèi)置 padding 屬性去掉，然后讓循環(huán)遍歷數(shù)據(jù)的 div 寬度充滿表格單元格，這時候再給循環(huán)遍歷的 div 添加對應的邊距，去除 Element Table 內(nèi)置 cell 樣式的時候再對應的列上添加了一個自定義 class 類 —— cell-control-type，這里用來修改 address 當前列的樣式，而不影響其他列

由于移除整個列的 padding, 列頭標題位置也受影響了，使用 label-class-name 屬性把列 title 的 margin-left 設置一下，就和原生效果一樣了

<el-table-column
  label="地址"
  class-name="cell-control-type"
  label-class-name="cell-control-title"
>
  <template slot-scope="scope">
    <div
      style=""
      v-for="(item, index) in scope.row.address"
      :key="index"
    >
      <div
        v-if="index === scope.row.address.length - 1"
        style="padding: 10px"
      >
        {{ item }}
      </div>
      <div
        v-else
        style="border-bottom: 1px solid #ebeef5; padding: 10px"
      >
        {{ item }}
      </div>
    </div> 
  </template>
</el-table-column>
<style>
.cell-control-type {
  padding: 0 0 !important;
}
.cell-control-title {
  margin-left: 10px;
}
.cell-control-type .cell {
  padding: 0 0 !important;
}
</style>

看一下調(diào)整后的完整效果，這時候看起來合并效果還不錯，也滿足產(chǎn)品經(jīng)理的需求了