效果如下:
合并单元格(表头):
:edit-render="{autofocus: '.vxe-input--inner'}"
是控制是否可编辑单元格,和:edit-config
搭配使用
合并列方法绑定:span-method
,具体如下
<vxe-tableref="xTable"borderresizablekeep-sourceshow-overflowalign="center":data="tableData1":scroll-y="{enabled: false}":span-method="rowspanMethod":column-config="{resizable: true, width: 120}":edit-config="isEdit ? {trigger: 'click', mode: 'cell' ,showStatus: true, icon: 'vxe-icon-edit'}:{}"@edit-closed="editClosedEvent"><vxe-colgroup field="a" title="用量分析"><vxe-column field="b" title="业务"><template #default="{ row }"><span style="white-space: break-spaces">{{ row.b }}</span></template></vxe-column><vxe-column field="c" title="参数"><template #default="{ row }"><span style="white-space: break-spaces">{{ row.c }}</span></template></vxe-column><vxe-column field="d" title="业务类型I" /><vxe-colgroup field="e" title="XXX"><vxe-colgroup field="f" title="运营商不明"><vxe-column field="g" title="有ICCID" :edit-render="{autofocus: '.vxe-input--inner'}"><template #edit="{ row }"><vxe-input v-model="row.g" type="text" /></template></vxe-column><vxe-column field="h" title="无ICCID" :edit-render="{autofocus: '.vxe-input--inner'}"><template #edit="{ row }"><vxe-input v-model="row.h" type="text" /></template></vxe-column></vxe-colgroup></vxe-colgroup></vxe-table>
数据结构:
tableData1: [{ id: 10001, c: '10MB流量(张)', b: `物联网卡(单张卡计费方式)`, d: '生产', e: 'Develop', f: '0', g: '0', h: 1, i: 1 },{ id: 10002, c: '10MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '营销', e: 'Designer', f: '1', g: '0', h: 1, i: 22 },{ id: 10003, c: '10MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '未知', e: 'Test', f: '0', g: '1', h: 1, i: 1 },{ id: 10005, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '生产', e: 'Designer', f: '1', g: '1', h: 30, i: 23 },{ id: 10006, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '营销', e: 'Designer', f: '1', g: '1', h: 'Develop Develop' },{ id: 10007, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '未知', e: 'Designer', f: 'Develop', g: '1', h: 30, i: 23 }],
合并列的方法:
重点理解:若前一行的值与下一行的值数据相同,则合并
rowspanMethod({ row, _rowIndex, column, visibleData }) {const fields = ['b', 'c']const cellValue = row[column.field] // 单元格的值if (cellValue && fields.includes(column.property)) {const prevRow = visibleData[_rowIndex - 1]let nextRow = visibleData[_rowIndex + 1]if (column.property === 'b') {if (prevRow && prevRow[column.property] === cellValue) {return { rowspan: 0, colspan: 0 }} else {let countRowspan = 1while (nextRow && nextRow[column.property] === cellValue) {nextRow = visibleData[++countRowspan + _rowIndex]}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 }}}} else if (column.property === 'c') {if (prevRow && prevRow[column.property] === cellValue) {return { rowspan: 0, colspan: 0 }} else {let countRowspan = 1while (nextRow && nextRow[column.property] === cellValue) {nextRow = visibleData[++countRowspan + _rowIndex]}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 }}}}}}