vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)

更新時間：2023年07月31日 11:04:46 作者：慌張的葡萄

這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下

1.業(yè)務(wù)需求：

合并相同數(shù)據(jù)的單元格（僅合并列）；
實現(xiàn)條件篩選功能（意思是：內(nèi)容不固定，需要動態(tài)合并）；
顯示數(shù)字的列不合并，需要合并指定列（意思就是：我就想合并哪列就哪列 orz）；
數(shù)據(jù)相同但所屬父級不一致的單元格不合并；
空值不合并;

2.效果展示：

3. 實現(xiàn)思路：

3.1 由文檔可知：el-table組件主要靠span-method方法實現(xiàn)合并

3.2 由以下可看出，返回所占單元格的值即可進行合并，那么找出所有單元格的占位即可

return [rowIndex,columnIndex]
[5,1] 表示當(dāng)前單元格占5行，1列
[0,0] 隱藏單元格
[1,1] 保持不變

例：生成以下右側(cè)圖示數(shù)據(jù)即可

4.先看一下表數(shù)據(jù)格式（test.vue 頁面）

  tableColumn: [
        { prop: 'School', label: '學(xué)校' },
        { prop: 'Grade', label: '年級' },
        { prop: 'Class', label: '班級' },
        { prop: 'Name', label: '姓名' },
        { prop: 'Chinese', label: '中文' },
        { prop: 'Math', label: '數(shù)學(xué)' },
        { prop: 'English', label: '英文' }
      ],
      tableData: [
        {
          School: '第一小學(xué)',
          Grade: '1年級',
          Class: '1班',
          Name: '張三',
          Chinese: '90',
          Math: '100',
          English: '80'
        },
       ...
      ]

5.關(guān)鍵代碼，抽成共用方法（table.js頁面）

/**
 * 分析每一列，找出所有【列】可合并（數(shù)據(jù)相同）的單元格
 * @param {Array} tableData 表數(shù)據(jù)
 * @param {Array} tableColumn 表字段/表頭
 * @param {Array} mergeCols 指定合并哪些列（字段）
 * @returns
 */
export const getMergeCells = (tableData = [], tableColumn = [], mergeCols = []) => {
  const fields = tableColumn?.map(v => v.prop)
  const array = []
  if (!tableData?.length || !tableColumn?.length || !mergeCols?.length) return
  // 倒敘遍歷行（方便統(tǒng)計合并列單元格數(shù)至最上方，避免表格塌陷）
  for (let row = tableData.length - 1; row >= 0; row--) {
    array[row] = []
    for (let col = 0; col < fields.length; col++) {
       // 1.最后一行單元格不合并（初始無可對比數(shù)據(jù)）
       // 2.不在指定列（mergeCols）的單元格不合并
       // 3.空值不合并
      if (row === tableData.length - 1 || !mergeCols.includes(fields[col]) || !tableData[row][fields[col]]) {
        array[row][col] = [1, 1]
        continue
      }
      // 4.數(shù)據(jù)相同但所屬父級不一致的單元格不合并
      const parentFields = mergeCols.slice(0, col) // 在指定合并列中找出所有父級
      if (mergeCols.includes(fields[col]) && parentFields?.includes(fields[col - 1])) {
        const currentParents = parentFields.map(field => tableData[row][field]) // 當(dāng)前單元格所有父級
        const nextRowParents = parentFields.map(field => tableData[row + 1][field]) // 下一行單元格所有父級
        if (currentParents?.toString() !== nextRowParents?.toString()) {
          array[row][col] = [1, 1]
          continue
        }
      }
      // 5.合并相同數(shù)據(jù)的單元格
      if (tableData[row][fields[col]] === tableData[row + 1][fields[col]]) {
        const beforeCell = array[row + 1][col]
        array[row][col] = [1 + beforeCell[0], 1]
        beforeCell[0] = 0
        beforeCell[1] = 0
      } else {
        array[row][col] = [1, 1] // 否則不合并
      }
    }
  }
  // console.log(array, 'array')
  return array
}

優(yōu)點：

可動態(tài)指定需要合并的列
空值（null、undefined、空字符串、0）不會被合并
數(shù)據(jù)相同但所屬父級不相同的不會被合并，并且不用手動指定父級

缺點：

不支持相鄰的行合并

6.完整代碼：（test.vue頁面）

<template>
  <div class="main">
    <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" min-width="180" />
    </el-table>
  </div>
</template>
<script>
import { getMergeCells } from '@/projects/onemap/utils/table.js'
export default {
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      tableColumn: [
        { prop: 'School', label: '學(xué)校' },
        { prop: 'Grade', label: '年級' },
        { prop: 'Class', label: '班級' },
        { prop: 'Name', label: '姓名' },
        { prop: 'Chinese', label: '中文' },
        { prop: 'Math', label: '數(shù)學(xué)' },
        { prop: 'English', label: '英文' }
      ],
      tableData: [
        { School: '第一小學(xué)', Grade: '1年級', Class: '1班', Name: '張三', Chinese: '90', Math: '100', English: '80' },
        { School: '第一小學(xué)', Grade: '1年級', Class: '1班', Name: '張偉', Chinese: '90', Math: '99', English: '89' },
        { School: '第一小學(xué)', Grade: '1年級', Class: '2班', Name: '李四', Chinese: '90', Math: '85', English: '80' },
        { School: '第一小學(xué)', Grade: '1年級', Class: '3班', Name: '王五', Chinese: '79', Math: '100', English: '80' },
        { School: '第一小學(xué)', Grade: '2年級', Class: '1班', Name: '趙六', Chinese: '95', Math: '100', English: '80' },
        { School: '第一小學(xué)', Grade: '2年級', Class: '2班', Name: '錢八', Chinese: '98', Math: '85', English: '80' },
        { School: '第一小學(xué)', Grade: '2年級', Class: '3班', Name: '陳九', Chinese: '79', Math: '100', English: '100' },
        { School: '第一小學(xué)', Grade: '3年級', Class: '1班', Name: '黃十', Chinese: '91', Math: '88', English: '80' },
        { School: '第一小學(xué)', Grade: '3年級', Class: '2班', Name: '魏一', Chinese: '90', Math: '86', English: '87' },
        { School: '第一小學(xué)', Grade: '3年級', Class: '3班', Name: '楊二', Chinese: '79', Math: '99', English: '80' },
        { School: '第二小學(xué)', Grade: '3年級', Class: '3班', Name: '袁零', Chinese: '79', Math: '99', English: '80' }
      ]
    }
  },
  computed: {
    // 獲取所有單元格合并數(shù)據(jù)
    spanArr() {
      if (!this.tableColumn.length) return []
      const mergeCols = ['School', 'Grade', 'Class'] // 需要合并的列（字段）
      return getMergeCells(this.tableData, this.tableColumn, mergeCols)
    }
  },
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 表數(shù)據(jù)合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.spanArr[rowIndex][columnIndex]
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>

以上就是vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)的詳細內(nèi)容，更多關(guān)于vue+elementUI合并單元格的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: