一、需求說明

表格中，如果一個學校有多個考試科目，則分行展示，其余列，則合并為一行展示，如圖所示

?

二、需求分析

1、表格行合并

相當于有4行，其中1、2行是同一個學校包含不同考試科目及對應人次的數據，所以除“考試科目、科目人次”列外，其余列數據相同，需要合并成一行；其中3、4行，同理；

ps：即上圖所示，分行展示的同一個學校中，“考試科目、科目人次”列如果有多個科目，則分行展示。

2、單元格內容自定義

“序號”列：根據合并行后的序號計算；

“完善性檢查”列：需要根據返回結果來判斷，單元格的內容及樣式；

“操作”列：需要自定義單元格內容；

?三、解決辦法

1、html 代碼

<a-table:rowKey="(record, index) => index":columns="dataList.columns":dataSource="dataList.dataSource":loading="dataList.loading":pagination="false"bordered
><!-- “序號”列 --><template v-slot:num="slotProps">{{(queryParm.pageIndex - 1) * queryParm.pageSize +dataList.mergeList.slice(0, slotProps.index).filter(res => {return res !== 0;}).length +1}}</template><!-- “完備性檢測”列 --><template #state="{ record }"><span v-if="record.state === '2'" class="safe-level-1">考生照異常</span><span v-else-if="record.state === '1'" class="safe-level-2">正常</span><span v-else class="safe-level-1">考生照片不全</span></template><!-- “操作”列 --><template #action="{ record }"><div class="inline look" @click.stop="getDetails(record)"><svg-icon icon-class="details" class="icon look"></svg-icon><span class="note">詳情</span></div></template>
</a-table>

?

2、數據 格式

const queryParm= reactive({pageIndex: 1,pageSize: 10
});const dataList= reactive({dataSource: [],columns: [{title: "序號",dataIndex: "num",key: "num",align: "center",width: 100,slots: { customRender: "num" },customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "學校名稱",dataIndex: "schoolName",key: "schoolName",ellipsis: true,customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "所屬區縣",dataIndex: "cityName",key: "cityName",ellipsis: true,customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "報名人數",dataIndex: "stuNum",key: "stuNum",ellipsis: true,customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "涉及考點",dataIndex: "siteName",key: "siteName",ellipsis: true,customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "考試科目",dataIndex: "subjectName",key: "subjectName",ellipsis: true},{title: "科目人次",dataIndex: "numberOfSubject",key: "numberOfSubject",ellipsis: true},{title: "上傳時間",dataIndex: "createTime",key: "createTime",ellipsis: true,customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "完備性檢測",dataIndex: "state",key: "state",ellipsis: true,slots: { customRender: "state" },customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}},{title: "操作",dataIndex: "action",key: "action",width: 100,slots: { customRender: "action" },customCell: (record, rowIndex) => {return {style: {display: dataList.mergeList[rowIndex] === 0 ? "none" : undefined},rowSpan: dataList.mergeList[rowIndex]};}}],total: 0,loading: false,mergeList: []}
});

?

?注意事項

---

?PS：

1、使用?customCell 屬性合并行，則不會影響插槽及?customRender 屬性的使用；

2、customCell 單元格合并后，需要對被合并行進行樣式上的隱藏處理（如果沒有在樣式上隱藏被合并行，則被合并行會被擠到該行列尾）；

3、rowSpan 屬性 支持行合并：

????????值為 0 時，該單元格不會渲染（即，被合并）；

? ? ? ? 值為 1 時，該單元格正常顯示（即，1行）；

????????值為 2 時，該單元格與下一行一起合并展示（即，原2行，現1行展示）；

????????值為 3 時，該單元格與下兩個行一起合并展示（即，原3行，現1行展示）；

? ? ? ? 以此類推

?

?3、合并行計算

數據處理代碼如下：

/*** @description 獲取合并單元格rowSpan集合* @param {Array} dataScroce 數據源* @param {String} filed 需要合并的字段* @returns {Array} 該字段下單元格rowSpan集合*/
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;
};

得到每行是否需要合并的結果：

dataList.mergeList = getRowspan(dataList.dataSource, "schoolName");

?

四、參考鏈接

antd的a-table表格中合并且使用插槽（使用customRender合并出現問題解決方案）_a-table customrender-CSDN博客文章瀏覽閱讀1.5w次，點贊30次，收藏44次。antd的a-table表格中合并且使用插槽1. customRender合并單元格在antd官方文檔中，是由使用customRender方式將單元格合并的方法data() { const columns = [ { title: 'Name', dataIndex: 'name', customRender: (text, row, index) => { if (index < 4) { _a-table customrenderhttps://blog.csdn.net/chenyuhang_henry/article/details/118187249?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118187249-blog-124870111.235^v43^pc_blog_bottom_relevance_base9&spm=1001.2101.3001.4242.3&utm_relevant_index=7