element-ui+vue el-table表头以及表格合并

最新推荐文章于 2024-04-12 15:37:33 发布

原创最新推荐文章于 2024-04-12 15:37:33 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Element-UI中使用Vue组件实现表格表头的合并，以及根据数据动态调整行和列的跨越方式，以适应多开标室、评标室和评审室的需求。方法包括自定义rowspan和colspan函数，详细展示了合并规则和示例代码.

element-ui+vue el-table表头以及表格合并

需要达到的效果(有三个开标室,两个评标室,一个评审室将相同类型的表格合并)
在这里插入图片描述

在这里插入图片描述

放到methods中:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex ==0) {
      return {
        rowspan: 3,
        colspan: 1
      };
    }else if(rowIndex ==3 ) {
      return {
        rowspan:2,
        colspan:1
      }
    }else if(rowIndex == 5){
      return {
        rowspan:1,
        colspan:1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

这里的rowIndex ==0 就是从下标零开始合并三个,rowIndex ==3 就是下标从3开始合并两个的意思,到时候可以根据个人的数据情况自行进行调整.

合并表头例如要达到以下的效果
在这里插入图片描述

多套几层即可,详情可以看element-ui文档