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

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

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
}

你可能感兴趣的:(mars3d技术,vue.js,javascript,ecmascript)