vxe-table、vxe-grid合并行方法配置項(xiàng)生成方法

更多詳情配置可見vxe-grid官網(wǎng)

配置項(xiàng)規(guī)則說明

mergeCells:[{ "row": 0, "col": 2, "rowspan": 3, "colspan": 1 },.....]

vxe表格合并單元格的配置對(duì)象中，mergeCells 屬性用于定義如何合并單元格。

有四個(gè)關(guān)鍵字段，它們的意義分別如下：

• row: 表示合并起始的行索引（從0開始計(jì)數(shù)）。在這個(gè)例子中，合并起始于第0行。
• col: 表示合并起始的列索引（同樣從0開始計(jì)數(shù)）。這里，合并起始于第2列。
• rowspan: 定義了合并的行數(shù)，即從起始行向下合并的行數(shù)。例如，"rowspan": 3 意味著從第0行開始，總共合并3行。
• colspan: 定義了合并的列數(shù)，即從起始列向右合并的列數(shù)。在此例中，"colspan": 1 表示只合并1列，即不跨列合并，因?yàn)橥ǔ？缍葹?默認(rèn)不顯示，但在此結(jié)構(gòu)中用于精確指定。

例子中的這個(gè)配置將導(dǎo)致從表格的第0行第2列開始，向下合并3行，同時(shí)保持列寬不變（即不跨列合并）

生成配置項(xiàng)集合通用方法

/**
 * 設(shè)置表格合并行的公共方法
 * @param {any[]} list 表格數(shù)據(jù)
 * @param {any[]} columns 表頭
 * @param {String[]} merges 要合并的列字段名組成的數(shù)組
 * @param {String[]} condition 判斷條件的字段名組成的數(shù)組
 * @param {String} field 表頭取值的字段名
 */
export function setMergeCells({ list = [], columns = [], merges = [], condition = [], field = 'field' }) {
  const validMap = new Map(); // 有效合并配置項(xiàng)
  for (let i = 0; i < list.length; i++) {
    // 根據(jù)判斷條件取出當(dāng)前行對(duì)應(yīng)的表格數(shù)據(jù)，生成唯一標(biāo)識(shí)
    const hashKey = condition.map(field => list[i][field]).join('&&');
    let flag = true;
    let count = 1;
    // 從當(dāng)前索引i開始，往后找，數(shù)據(jù)相同的話，count自增，否則跳出while循環(huán)
    while (flag && i + count < list.length) {
      // 根據(jù)判斷條件取出下一行的表格數(shù)據(jù)，生成唯一標(biāo)識(shí)
      const nextRow = condition.map(field => list[i + count][field]).join('&&');
      if (hashKey === nextRow) {
        // 數(shù)據(jù)相同，count自增
        count++;
      } else {
        // 數(shù)據(jù)不同，跳出while循環(huán)
        flag = false;
      }
    }
    // 將有效的合并配置項(xiàng)存入validMap
    count > 1 && validMap.set(hashKey + '_' + i, { row: i, rowspan: count });
    // i 跳過已合并的行，減 1 是因?yàn)?i++
    i += count - 1;
    // 重置 while 循環(huán)標(biāo)識(shí)
    flag = true;
  }
  // 合并記錄轉(zhuǎn)換
  const recordsList = [...validMap.values()];
  if (recordsList.length == 0) {
    return [];
  }
  // 預(yù)處理列索引
  const cols = merges.reduce((acc, mergeField) => {
    const idx = columns.findIndex(item => item[field] === mergeField);
    idx !== -1 && acc.push(idx);
    return acc;
  }, []);
  // 遍歷列索引，生成合并單元格配置集合
  const mergeCells = recordsList.flatMap(({ row, rowspan }) => cols.map(col => ({ row, col, rowspan, colspan: 1 })));
  return mergeCells;
}

方法簡述

此方法 setMergeCells 的目的是根據(jù)給定的條件（condition）來合并表格中的行。

它接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象包含幾個(gè)關(guān)鍵屬性：

• list（表格數(shù)據(jù)列表）
• columns（列定義列表）、
• merges（指定哪些列應(yīng)該被考慮合并的字段名列表）、
• condition（用于判斷哪些行應(yīng)該被合并的條件字段名列表）、
• field（用于在列定義中查找字段名的鍵名，默認(rèn)為 'field'）。

方法最終返回一個(gè)合并單元格的配置集合。

以下是該方法的詳細(xì)解析：

1.初始化：

• 創(chuàng)建一個(gè) Map 對(duì)象 validMap
• 用于存儲(chǔ)有效的合并配置項(xiàng)

2.遍歷數(shù)據(jù)行：

• 遍歷 list 中的每一行。
• 對(duì)于每一行，根據(jù) condition 字段列表生成一個(gè)唯一標(biāo)識(shí) hashKey，該標(biāo)識(shí)是通過將當(dāng)前行中 condition 指定的字段值連接（使用 '&&' 作為分隔符）得到的。
• 使用一個(gè) while 循環(huán)從當(dāng)前行開始向后查找，直到找到與當(dāng)前行 hashKey 不相同的行或到達(dá)列表末尾。
• 在這個(gè)過程中，如果找到與當(dāng)前行 hashKey 相同的行，則計(jì)數(shù)器 count 自增。
• 一旦找到不同的行或到達(dá)列表末尾，將有效的合并配置項(xiàng)（如果有多于一行的相同數(shù)據(jù)）存入 validMap。配置項(xiàng)包括起始行號(hào) row 和需要合并的行數(shù) rowspan。
• 更新當(dāng)前行索引 i，跳過已合并的行。

3.合并記錄轉(zhuǎn)換：

• 將 validMap 中的值（合并配置項(xiàng)）轉(zhuǎn)換為一個(gè)數(shù)組 recordsList。
• 如果沒有有效的合并配置項(xiàng)，則直接返回空數(shù)組。

4.預(yù)處理列索引：

• 遍歷 merges 列表，找到每個(gè)需要合并的字段在 columns 中的索引，并將這些索引存儲(chǔ)在 cols 數(shù)組中。

5.生成合并單元格配置集合：

• 使用 flatMap 遍歷 recordsList 中的每個(gè)合并配置項(xiàng)，并對(duì)每個(gè)配置項(xiàng)中的每個(gè)列索引（cols 數(shù)組中的元素）生成一個(gè)合并單元格配置對(duì)象。
• 配置對(duì)象包括起始行號(hào) row、列索引 col、需要合并的行數(shù) rowspan 以及列跨度 colspan（這里固定為 1，因?yàn)榉椒ㄖ饕幚硇泻喜ⅲ?/li>
• 最終返回所有合并單元格配置對(duì)象的集合。

此方法根據(jù)某些條件自動(dòng)合并具有相同數(shù)據(jù)的行，以便于在前端表格展示時(shí)減少冗余數(shù)據(jù)，提高可讀性。

通過指定哪些列應(yīng)該被考慮合并（merges）和哪些字段用于判斷行是否應(yīng)該合并（condition），提供了靈活的合并邏輯。

該方法在時(shí)間復(fù)雜度上的簡析

1.遍歷數(shù)據(jù)行：

• 外層循環(huán)遍歷list中的每一行，這需要O(n)的時(shí)間，其中n是list的長度。

2.內(nèi)部while循環(huán)：

• 對(duì)于list中的每一行，內(nèi)部while循環(huán)用于查找連續(xù)的相同行。在最壞的情況下，這個(gè)循環(huán)可能會(huì)遍歷到list的末尾（如果所有行都相同），但在平均情況下，它可能只遍歷幾行。然而，為了進(jìn)行時(shí)間復(fù)雜度分析，我們需要考慮最壞情況，即每一輪外層循環(huán)內(nèi)部的while循環(huán)都會(huì)遍歷剩余的n-i行（其中i是當(dāng)前外層循環(huán)的索引）。
• 如果我們假設(shè)在最壞情況下，每一行都與前一行相同（除了最后一行），那么while循環(huán)的總時(shí)間復(fù)雜度將是O(n) + O(n-1) + O(n-2) + ... + O(1)，這是一個(gè)等差數(shù)列的和，其和為O(n^2)。

3.Map操作和記錄轉(zhuǎn)換：

• 將合并配置項(xiàng)添加到validMap中以及后續(xù)從validMap轉(zhuǎn)換到recordsList數(shù)組的操作，其時(shí)間復(fù)雜度與validMap的大小成正比，但由于validMap的大小受list中相同行的數(shù)量影響，且在最壞情況下可以達(dá)到O(n)（如果所有行都不同），因此這部分的復(fù)雜度可以視為O(n)。然而，由于前面while循環(huán)的O(n^2)復(fù)雜度，這個(gè)O(n)在這里是可以忽略的。

4.預(yù)處理列索引：

• 遍歷merges列表并查找每個(gè)元素在columns中的索引是一個(gè)O(m*k)的操作，其中m是merges的長度，k是columns的長度。
• 由于m和k通常遠(yuǎn)小于n，并且不依賴于n，因此這部分的復(fù)雜度可以視為常數(shù)時(shí)間或O(1)（在n的上下文中）。

5.生成合并單元格配置集合：

• 這部分操作的時(shí)間復(fù)雜度與recordsList的大小和cols的長度成正比。
• 在最壞情況下，recordsList的大小可以達(dá)到O(n)（如果所有行都不同，則沒有合并），而cols的長度是常數(shù)。因此，這部分的復(fù)雜度可以視為O(n)。然而，同樣由于前面while循環(huán)的O(n^2)復(fù)雜度，這個(gè)O(n)在這里也是可以忽略的。

綜上所述，setMergeCells函數(shù)的時(shí)間復(fù)雜度主要由內(nèi)部while循環(huán)決定，為O(n^2)。這是因?yàn)樵谧顗那闆r下，內(nèi)部while循環(huán)需要為list中的每一行都遍歷剩余的所有行來查找連續(xù)的相同行。其他操作的時(shí)間復(fù)雜度在這個(gè)上下文中是可以忽略的。

使用示例

以vue為示例模板

<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions" />
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        // ...otherParmas,
        mergeCells: [],
        columns: [
          { field: 'sex', title: '性別' },
          { field: 'name', title: '姓名' },
          { field: 'idCard', title: '身份證' },
          { field: 'time', title: '時(shí)間' }
          // ...otherColumns,
        ],
        data: [
          // ...otherData,項(xiàng)目中一般是異步請(qǐng)求數(shù)據(jù)
          { id: 10001, sex: 'xxxx', name: 'xxxx', idCard: 'xxxx', time: 'xxxx' }
        ]
      }
    };
  },
  created() {
    // 請(qǐng)求數(shù)據(jù)后執(zhí)行合并方法
    this.setRowSpans()
  },
  methods: {
    // 合并單元格
    setRowSpans() {
      const options = {
        list: this.gridOptions.data, // 表格數(shù)據(jù)
        columns: this.gridOptions.columns, // 完整表頭
        merges: ['sex', 'name'], // 需要合并的列
        condition: ['idCard'], // 合并條件
        field: 'field' // 表頭取值的字段
      };
      // 傳入此配置項(xiàng)，是指將idCard相等的相鄰數(shù)據(jù)合并，如果兩條數(shù)據(jù)不相鄰即使idCard相等也不會(huì)合并
      this.mergeCells = setMergeCells(options);
      console.log('this.mergeCells: ', this.mergeCells);
    }
  }
};
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。