Open lesonky opened 5 years ago
这并不是一个问题单,只是分享一下使用心得,希望能对后面使用的人有所帮助
合并单元格会导致各行的 td 元素 个数不一样,因为表格是切分成三个来显示的,所以会导致单元格错位问题
通过给单元格定制特殊的样式来模拟单元格的合并 el-table 中 cell-class-name 和span-method 都可以接收 function,而且参数是一致的,所以我们可以用span-method的方法去为合并的单元格加上特殊的样式,对于{rowspan: 0, colspan: 0}的单元格,可以隐藏单元格内容,隐藏上下边框,这样就像合并了单元格一样
cell-class-name
span-method
这样的合并存在的问题是,合并的单元格只是一个假象,并不能实现居中对齐等 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; } } } }
赞。
居中部分也可以hack一下,头尾隐藏然后手动计算下通过cell-style给中间的单元格一个偏移量(行高的一半)
问题:
合并单元格会导致各行的 td 元素 个数不一样,因为表格是切分成三个来显示的,所以会导致单元格错位问题
个人解决思路:
通过给单元格定制特殊的样式来模拟单元格的合并 el-table 中
cell-class-name
和span-method
都可以接收 function,而且参数是一致的,所以我们可以用span-method
的方法去为合并的单元格加上特殊的样式,对于{rowspan: 0, colspan: 0}的单元格,可以隐藏单元格内容,隐藏上下边框,这样就像合并了单元格一样存在的问题:
这样的合并存在的问题是,合并的单元格只是一个假象,并不能实现居中对齐等 td 元素效果,但是目前只能通过这种方式来Hack 一下
效果:
下面是一些示例代码:
整理表格数据的时候,将需要合并的单元格数据整理成对象形式.整体大概是下面这样
然后我们可以通过一个工具函数来得到
cell-class-name
函数然后覆盖默认样式