在項(xiàng)目中，有時候需要實(shí)現(xiàn)單元格合并的需求,這里記錄一下在Ant Design Vue的實(shí)現(xiàn)

20210331103339.jpg

查看官方文檔合并單元格可以使用

表頭只支持列合并，使用 column 里的 colSpan 進(jìn)行設(shè)置笛臣。
表格支持行/列合并交煞，使用 render 里的單元格屬性 colSpan 或者 rowSpan 設(shè)值為 0 時路媚，設(shè)置的表格不會渲染。

我們使用rowSpan來合并表格單元格

• 定義一個處理tabledata數(shù)據(jù) this.data 的rowSpan方法

  rowSpan(key) {
      let arr = this.data
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.data.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0
            }))
          )
          return result
        }, [])
      this.data = arr
    }

• 在table 的 columns 數(shù)據(jù)中定義customRender

  {
      title: '產(chǎn)品Code',
      dataIndex: 'skuCode',
      customRender: (text, record) => { // text 當(dāng)前行的值，record 當(dāng)前行數(shù)據(jù)
        return {
          children:  text,
          attrs: {
            rowSpan: record.skuCodeRowSpan
          }
        }
      },
      width: 140
    },

• 在處理tableData數(shù)據(jù)的時候調(diào)用rowSpan方法

  getSelectOutStorageDynamicRecord:_.debounce(function() {
      const companyId = localStorage.getItem('companyId')
      const companyType = localStorage.getItem('companyType')
      if (companyType != 'WAREHOUSE') {
        this.params.companyId = companyId
      }
      this.params.bizType = this.params.bizType === 'NULL' ? 'INSTORAGE_ORDER' : this.params.bizType
      this.params.allFlag = this.params.bizType === 'NULL'
      this.loading = true
      postJson(api.selectOutStorageDynamicRecord, this.params).then(res => {
        if (res.data.code === 0) {
          // 處理合并單元格數(shù)據(jù)
          this.data = res.data.data.records
          // 需要合并的參數(shù)
          this.rowSpan('bizCode')
          this.rowSpan('odSkuCustDrawNum')
          this.rowSpan('skuCode')
          this.rowSpan('skuSpec')
          this.rowSpan('skuCz')
          this.pagination.total = parseInt(res.data.data.total)
          res.data.data.records.forEach(obj => {
            if (!this.relevanceList.includes(obj.relateBizCode)) {
              this.relevanceList.push(obj.relateBizCode)
            }
            if (!this.messageList.includes(obj.bizCode)) {
              this.messageList.push(obj.bizCode)
            }
          })
        }
        this.loading = false
      })
    },1000),

• 最終效果

  
  
  20210331105052.jpg