ant-design-vue動態表格合并怎么實現

這篇文章主要介紹“ant-design-vue動態表格合并怎么實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“ant-design-vue動態表格合并怎么實現”文章能幫助大家解決問題。

數據格式

后端會返回給我們一個數組,數組的每一項格式是這樣,在這個需求里，我們需要對 title，department,bugType 這三個字段相同的值的單元格進行合并

 {
          fixCount: 0,
          id: 0,
          codeType: '新代碼',
          bugType: 'ui展示問題',
          notFixedCount: 0,
          todayAdd: 0,
          totalCount: 0,
          title: 'bug總覽',
          department: '開發一部'
        },

ant-desgin-vue表格提供的api

ant-desigin-vue的table組件提供一個自定義渲染單元格的方法customRender，接收兩個參數,一個text當前值，row當前行，我們可以根據我們業務需求對它進行操作，然后把它return 出去就能得到想要的效果

表格支持行/列合并，使用 render 里的單元格屬性 colSpan 或者 rowSpan 設值為 0 時，設置的表格不會渲染。

具體可以看下這個鏈接 

所以先定義columns也就是表頭格式

    columns: [
        {
          title: '',
          dataIndex: 'title',
          width: 120,
          customRender: (text, row) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.titleRowSpan
              }
            }
          }
        },
        {
          title: '部門',
          dataIndex: 'department',
          width: 120,
          customRender: (text, row, index) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.departmentRowSpan
              }
            }
          }
        },
        {
          title: '代碼類型',
          dataIndex: 'codeType',
          width: 120
        },
        {
          title: '總數',
          dataIndex: 'totalCount',
          width: 120
        },
        {
          title: '修復',
          dataIndex: 'fixCount',
          width: 120
        },
        {
          title: '未修復',
          dataIndex: 'notFixedCount',
          width: 120
        },
        {
          title: '今日新增',
          dataIndex: 'todayAdd',
          width: 120
        },
        {
          title: 'Bug類型',
          dataIndex: 'bugType',
          width: 120,
          customRender: (text, row, index) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.bugTypeRowSpan
              }
            }
          }
        }
      ],

合并單元格算法實現

說下思路：

其實就是類似于雙指針的思想：

• 需要兩次循環，第一次循環i，作為合并單元格后的起始點，

• 第二次循環j是從起始點找下一個值是否是相同的值，如果相同則合并單元格,合并的數量就是count，然后把本次循環相同值的最后一個序號保存下來，第一次循環就從這個序號開始繼續跑

具體代碼實現如下：

//  合并單元格
    combineRow(key) {
      const tableData = this.tableData
      for (var i = 0; i < tableData.length; i++) {
        const item = tableData[i]
        let count = 1
        for (let j = i + 1; j < tableData.length; j++) {
          // 如果是同一個值，往后遞增
          if (item[key] === tableData[j][key]) {
            count++
            // 往后相同的值都設為空單元格
            tableData[j][`${key}RowSpan`] = 0
            // 只有同值第一個才設置合并的單元格數
            item[`${key}RowSpan`] = count
            // 所有都是為同一個值的情況
            // 如果到了尾部，則循環結束
            if (j === tableData.length - 1) {
                return
            }
          } else {
            // 指針跳轉到下一個，從下一排開始
            i = j - 1
            count = 1
            tableData[j][`${key}RowSpan`] = 0
            break
          }
        }
      }
      this.tableData = tableData
    }

然后我們在created中調用

  created() {
    this.combineRow('title') // 合并title
    this.combineRow('department') // 合并部門
    this.combineRow('bugType') // 合并bug類型
  }

關于“ant-design-vue動態表格合并怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。