无分页,需要根据mac列进行列合并,最终效果如下所示:
核心实现如下:
// 核心代码
const getRowspan = (dataScroce, filed) => {let spanArr = [];let position = 0;dataScroce.forEach((item, index) => {if (index === 0) {spanArr.push(1);position = 0;} else {//需要合并的地方判断if (dataScroce[index][filed] === dataScroce[index - 1][filed]) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = index;}}});return spanArr
};
// vue dom
<a-table:loading="loading"rowKey="id"bordered:style="{ minHeight: '345px' }":scroll="{ y: 290}":columns="netColumns":data-source="netList":pagination="false"><span slot="online" slot-scope="text, record"><span v-if="record.online == 0"> 离线 </span><span v-if="record.online == 1"> 在线 </span></span></a-table>
// data
netColumns: [{title: 'mac',dataIndex: 'mac',ellipsis: true,align: 'center',customRender: (value, row, index) => {return{children: value,attrs: {rowSpan:row.rowSpan},};},},{title: 'ip',dataIndex: 'ipv4',ellipsis: true,align: 'center',},{title: this.$t('asset.asset.online-status'),dataIndex: 'online',ellipsis: true,align: 'center',width:90,scopedSlots: { customRender: 'online' },},{title: this.$t('asset.asset.update-time'),dataIndex: 'updateAt',ellipsis: true,align: 'center',},],
// datasource
this.netList = responses.data.map((item,index)=>{return {...item,rowSpan:getRowspan(responses.data,'mac')[index]}})