ant design 合并行

最新推荐文章于 2024-10-08 18:43:41 发布

Pony-YQ

最新推荐文章于 2024-10-08 18:43:41 发布

阅读量238

点赞数

分类专栏： VUE 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Super_Xiaoma/article/details/126467707

版权

VUE 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在数据表格中使用`customRender`属性来自定义渲染列，并实现根据特定数据进行行合并的功能。通过`mergeCells`方法计算并返回需要合并的行数，实现了动态合并相同数据的单元格，以优化表格展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据官网文档 customRender 进行自定义

声明列：
columns: [
        {
          title: '问题类别',
          dataIndex: 'problemType',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCells(value, 'problemType', index)
            return obj
          }
        },
        {
          title: '问题描述',
          dataIndex: 'problemInfo',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCells(value, 'problemInfo', index)
            return obj
          }
        }
]

// 根据相同数据计算需要合并的行数
mergeCells (text, key, index) {
      if (index !== 0 && text === this.data[index - 1][key]) {
        return 0
      }
      let rowSpan = 1

      for (let i = index + 1; i < this.data.length; i++) {
        if (text !== this.data[i][key]) {
          break
        }
        rowSpan++
      }
      return rowSpan
    }

效果如图