iview: 表格合并单元格

1、根据返回的计费号相同的行数据,计费号前面的字段进行单元格合并,效果如下:

image.png

2. 代码层面如下:

// 加个:span-method="handleSpan"
<Table style="margin:15px 0;" :columns="columns" :data="tableData" :span-method="handleSpan"></Table>

methods: {
  getList () {
      this.tableData = this.getRowCol(_result.records);
  },
  /**
   * 计算行列关系
   */
  getRowCol (arr) {
    if (this.tabsValue !== 'name1') {
      return;
    } 
    return arr.map((item, index) => {
      item.colspan = 0
      item.rowspan = 0
      if (!item.isLoad) {
        for (let i = index, len = arr.length; i < len; i++) {
          if (item.billId !== arr[i].billId) {
            break;
          } else {
            arr[i].isLoad = true
            item.colspan = i - index + 1
            item.rowspan = 1
          }
        }

      }
      return item
    })
  },
  handleSpan ({ row, column, rowIndex, columnIndex }) {
    if ([0, 1, 2, 3, 4].includes(columnIndex)) {
      let o = {
        colspan: row.rowspan,
        rowspan: row.colspan
      };
      return o;
    }
  },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容