【antd + vue】表格行合并，同时使用插槽

一、需求说明

表格中，如果一个学校有多个考试科目，则分行展示，其余列，则合并为一行展示，如图所示

二、需求分析

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