ant-design for vue. table合并单元格通用方法

最新推荐文章于 2024-09-23 11:09:04 发布

今日无事勾栏听曲

最新推荐文章于 2024-09-23 11:09:04 发布

阅读量1.2k

点赞数 5

分类专栏： mars3d技术

本文链接：https://blog.csdn.net/qq_44806249/article/details/125706094

版权

vue.js javascript ecmascript

mars3d技术专栏收录该内容

36 篇文章 7 订阅

订阅专栏

主要思想是通过遍历是否有相同的字段，并判断相同字段的数量，相关代码如下。

const columns = ref([
  {
    title: "分类",
    dataIndex: "name",
    customCell: (text, record, index) => {
      const textName = text.name
      const obj = {
        children: textName !== null ? textName : "",
        attrs: {}
      }
      obj.attrs.rowSpan = mergeCells(textName, "name", record)
      return obj.attrs
    }
  },
  {
    title: "模块名称",
    dataIndex: "moduleName",
    align: "center"
  },
  {
    title: "说明",
    dataIndex: "details",
    align: "center",
    width: 360
  },
  
])

function mergeCells(text, key, index) {
  if (index !== 0 && text === dataSource.value[index - 1][key]) {
    return 0
  }
  let rowSpan = 1

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