在做项目中常常遇到需要合并单元格的情况,有时候是表头合并在一起有时候需要表格内数据合并在一起,也有都合并的
下面是我设置的都合并的情况
表头合并:在column内要合并列的对象内设置colSpan:number(合并几个),然后把其它被合并的column对象内设置colSpan:0(会默认不显示)。这样即可完成表格头的合并
表格体合并:这个需要用到customRender:
先看官网给的说明:customRender=》生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并
Function(text, record, index) {}|slot-scope
说明上的意思很明显,就是渲染出一个函数返回一个obj对象,在obj对象内包含一些本身属性如children,attrs. 我们只需要设置attrs.colSpan = number(想要合并的表格数)即可
代码如下:
custorm =[
{//title: '产品名称',
key: 'producType',
dataIndex:'producType',
width:90,
colSpan:3,//合并表头
//自定义的渲染格式
customRender:(value, row, index) => {//合并行 和 标题头相同 本行合并几个其它行用colSpan = 0去取消显示
console.log(value,row,index)//本列的值,所有行数据包括本列,第几