Ant Design Vue Table 组件 单元格合并

在项目中，有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现

20210331103339.jpg

查看官方文档合并单元格可以使用

表头只支持列合并，使用 column 里的 colSpan 进行设置。
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

我们使用rowSpan来合并表格单元格

• 定义一个处理tabledata数据 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 数据中定义customRender

  {
      title: '产品Code',
      dataIndex: 'skuCode',
      customRender: (text, record) => { // text 当前行的值，record 当前行数据
        return {
          children:  text,
          attrs: {
            rowSpan: record.skuCodeRowSpan
          }
        }
      },
      width: 140
    },

• 在处理tableData数据的时候调用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) {
          // 处理合并单元格数据
          this.data = res.data.data.records
          // 需要合并的参数
          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