element合并表格行的方法實現(xiàn)

更新時間：2023年07月27日 15:51:10 作者：nuise_

本文主要介紹了element合并表格行的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

需求描述

動態(tài)獲取數(shù)據(jù)后，將ID相同的行，ID合并成一個。

官方方法

//rowIndex當前行號 columnIndex當前列號 由此可知道每一行渲染時都會調(diào)用當前方法，只不過在渲染過程中設(shè)置了它合并的行數(shù)和列數(shù)，從而得到不同的效果。
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {    //用于設(shè)置要合并的列
     if (rowIndex % 2 === 0) {   //用于設(shè)置合并開始的行號
       return {
         rowspan: 2,　　　　　//合并的行數(shù)
         colspan: 1          //合并的列數(shù)，設(shè)為０則直接不顯示
       };
     } else {
       return {
         rowspan: 0,
         colspan: 0
       };
     }
   }
 }

數(shù)據(jù)處理

由于element一行一行渲染，在渲染的時候調(diào)用合并函數(shù)，所以數(shù)據(jù)最好以一行一行的格式準備。

//table是一個數(shù)組，表示全部的數(shù)據(jù)
const table = [{
},{//每一個元素是一個對象，表示一行
},{
}]

假設(shè)后臺傳過來的數(shù)據(jù)是以下的格式，就需要對數(shù)據(jù)進行。

const table = {
    "123": [
        {
            "name": "張三",
            "number": "123",
        },
        {
            "name": "張三",
            "number": "1234",
        }
    ],
    "1234": [
        {
            "name": "王五",
            "number": "213"
        },
    ]
}
//映射方法
function mapper(): Array<validationResults> {
  const info: Array<validationResults> = [];
  for (const [id, personInfo] of Object.entries(table)) {
    personInfo.forEach((person) => {
      info.push({
        id,
        name: person.name,
        number: person.number,
      });
    });
  }
  return errorInfo;
}

行號合并

首先需要明確的是哪些行的第一列需要合并？id相同的列需要合并(這里的數(shù)據(jù)是有序的，id相同的挨在一起)需要合并幾列呢？element-ui提供的方法直接返回的是合并的行和列，所以我們需要一個方法來計算合并的行。

生成一個與行數(shù)相同的數(shù)組記錄每一行設(shè)置的合并數(shù)

const mergerow = [];
//獲取需要合并的行號
function getMergeRow(data) {　
  let pos;//記錄需要合并的第一行坐標
  for (let i = 0; i < data.length; i++) {
        if (i === 0) {
              mergerow.push(1);
              pos = 0
        } else {
          // 判斷當前元素與上一個元素是否相同
    if (data[i].id=== data[i - 1].id) {//如果相同表示當前行需要合并
                mergerow[pos] += 1; //合并的行數(shù)+1
                mergerow.push(0); //相同的被合并
              } else {//id不同說明，是下一個需要合并的第一行
                mergerow.push(1); 
                pos = i;
              }
        }
    }
};
//element-ui提供的方法
function cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = mergerow[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},

最后的數(shù)據(jù)表格

<template>
  <div>
 <el-table
      border
      :data="tableData"
      style="width: 100%;max-height: 160px;overflow: auto"
      :span-method="cellMerge">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="number"
        sortable
        label="數(shù)值 1">
      </el-table-column>
    </el-table>

到此這篇關(guān)于element合并表格行的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)element合并表格行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: