表格在前端开发用的非常多,最近一直在用antdesign开发vue项目,有一个需求就是要实现表格行合并,查看官网发现实现table表格的rowspan、colspan行列合并的案例代码如下:
<template> <a-table :columns="columns" :data-source="data" bordered> <template slot="name" slot-scope="text"> <a>{{ text }}</a> </template> </a-table> </template> <script> // In the fifth row, other columns are merged into first column // by setting it's colSpan to be 0 const renderContent = (value, row, index) => { const obj = { children: value, attrs: {}, }; if (index === 4) { obj.attrs.colSpan = 0; } return obj; }; const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park', }, { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park', }, ]; export default { data() { const columns = [ { title: 'Name', dataIndex: 'name', customRender: (text, row, index) => { if (index < 4) { return <a href="javascript:;">{text}</a>; } return { children: <a href="javascript:;">{text}</a>, attrs: { colSpan: 5, }, }; }, }, { title: 'Age', dataIndex: 'age', customRender: renderContent, }, { title: 'Home phone', colSpan: 2, dataIndex: 'tel', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; if (index === 2) { obj.attrs.rowSpan = 2; } // These two are merged into above cell if (index === 3) { obj.attrs.rowSpan = 0; } if (index === 4) { obj.attrs.colSpan = 0; } return obj; }, }, { title: 'Phone', colSpan: 0, dataIndex: 'phone', customRender: renderContent, }, { title: 'Address', dataIndex: 'address', customRender: renderContent, }, ]; return { data, columns, }; }, }; </script>
效果如下:
更详细的可以去参考官网案例:官网案例
代码比较多,不是特别好理解,重点代码就在columns
中的customRender
,尤其是里面的index
表示第几行,我这里使用时index
拿不到值,但可以通过value.index
获取索引,通过value.text
获取该字段的值,用的时候如果出现问题,需要自己再去调试下。
比如下面就是我实现某1列的每两行就合并为1行的customRender
部分TS
代码:
customRender: (value:any) => { const obj = { children: value.text, attrs: { rowSpan:1 }, }; if(value.index % 2 === 0){ obj.attrs.rowSpan = 2; } if(value.index % 2 === 1){ obj.attrs.rowSpan = 0; } return obj; }