如何实现合并列单元格

[lesonky]

这并不是一个问题单,只是分享一下使用心得,希望能对后面使用的人有所帮助

问题:

合并单元格会导致各行的 td 元素 个数不一样,因为表格是切分成三个来显示的,所以会导致单元格错位问题

个人解决思路:

通过给单元格定制特殊的样式来模拟单元格的合并
el-table 中 cell-class-name 和span-method 都可以接收 function,而且参数是一致的,所以我们可以用span-method的方法去为合并的单元格加上特殊的样式,对于{rowspan: 0, colspan: 0}的单元格,可以隐藏单元格内容,隐藏上下边框,这样就像合并了单元格一样

存在的问题:

这样的合并存在的问题是,合并的单元格只是一个假象,并不能实现居中对齐等 td 元素效果,但是目前只能通过这种方式来Hack 一下

效果:

下面是一些示例代码:

整理表格数据的时候,将需要合并的单元格数据整理成对象形式.整体大概是下面这样

const tableData = [
{date:{value:'2018-01-01', rowSpanStart:0 ,rowSpan:2},code:001,detail:'XXX'},
{date:{value:'2018-01-01', rowSpanStart:0,rowSpan:2},code:002,detail:'XXX'},
{date:{value:'2018-01-02', rowSpanStart:2 ,rowSpan:2},code:001,detail:'XXX'},
{date:{value:'2018-01-02', rowSpanStart:2 ,rowSpan:2},code:002,detail:'XXX'}
]

然后我们可以通过一个工具函数来得到cell-class-name函数

/**
 * 生成单元格class的方法
 * @param {[[number,string]]} rows 合并参数 [[列的index,列的名称]]
 */
const fakeSpanClassMethodGen = rows => ({
  row, column, rowIndex, columnIndex,
}) => {
  for (let __index = 0; __index < rows.length; __index++) {
    const [index, name] = rows[__index];
    if (columnIndex === index) {
      if (rowIndex === row[name].rowSpanStart && row[name].rowSpan === 1) {
        return 'fake_start_end';
      }
      if (rowIndex === row[name].rowSpanStart) {
        return 'fake_start';
      }
      if (rowIndex === row[name].rowSpanStart + row[name].rowSpan - 1) {
        return 'fake_end';
      }
      return 'fake_hidden';
    }
  }
};
// 生成一个 cell-class-name 方法,通过第一列 的 date字段来合并
const cellClassName = fakeSpanClassMethodGen([[0, 'date']]),

然后覆盖默认样式

.el-table {
  td {
    &.fake_start{
      border-bottom: none;
    }
    &.fake_hidden{
      border-bottom: none;
      .cell {
        display: none;
      }
    }
    &.fake_end{
      .cell {
        display: none;
      }
    }
  }
}

[kl2426]

赞。

[Jkanon]

居中部分也可以hack一下，头尾隐藏然后手动计算下通过cell-style给中间的单元格一个偏移量（行高的一半）