AntDesign 表格的行合并

一、AntDesign 表格的行合并

1.1 需求说明

• 当前返回的数据的表结构为

  const requestData = [
    {
      id: 1,
      name: "项目名称",
      type: "项目类型",
      subprojects: [
        {
          sub_name: "子项目名称1",
          sub_count: "50k",
        },
        {
          sub_name: "子项目名称2",
          sub_count: "340k",
        },
        {
          sub_name: "子项目名称3",
          sub_count: "650k",
        },
      ],
    },
  ];
  

• 实现效果：name、type、勾选款合并

1.2 数据的处理

<script setup>
const data = ref([]);
let tableData = [];
requestData.map((reqItem) => {
  reqItem.subprojects.map((subproject, index) => {
    // 计算需要合并的行数，相同合并的值为0
    let rowSpan = 0;
    if (index == 0) {
      rowSpan = reqItem.subprojects.length;
    }
    let tabelItem = { ...reqItem, rowSpan: rowSpan };
    tabelItem = { ...tabelItem, ...subproject, subprojects: [] };
    tableData.push(tabelItem);
  });
});

data.value = tableData;
</script>

1.3 表头的定义

<script setup>
// 返回需要进行合并的行属性
const customCell = (record) => {
  return { rowSpan: record.rowSpan };
};
// 表格的显示规则
const columns = [
  {
    title: "1",
    key: "id",
    customCell: customCell,
    customTitle: true,
  },
  {
    title: "项目名称",
    dataIndex: "name",
    key: "name",
    customCell: customCell,
  },
  {
    title: "项目类型",
    dataIndex: "type",
    key: "type",
    customCell: customCell,
  },
  {
    title: "子项目名称",
    key: "sub_name",
    dataIndex: "sub_name",
  },
  {
    title: "子项目代码量",
    key: "sub_count",
    dataIndex: "sub_count",
  },
  {
    title: "操作",
    key: "action",
    customCell: customCell,
  },
];
</script>

1.4 表格的使用

<script setup>
const selectedRowKeys = ref([]);
/**
 * 选中表格行的操作
 */
const onRowSelectChange = (selectedKeys) => {
  selectedRowKeys.value = selectedKeys;
};
/**
 * 全选，取消全选
 */
const onCheckAllChange = (e) => {
  console.log("=全选", e.target.checked);
  if (e.target.checked) {
    onRowSelectChange(requestData.map(({ id }) => id));
  } else {
    onRowSelectChange([]);
  }
};
/**
 * 单个选中和取消
 * @param e
 * @param recordId
 */
const onCheckChange = (e, recordId) => {
  if (e.target.checked) {
    onRowSelectChange(
      Array.from(new Set([...selectedRowKeys.value, recordId]))
    );
  } else {
    const filterSelectIds = selectedRowKeys.value.filter(
      (selectId) => selectId != recordId
    );
    onRowSelectChange(filterSelectIds);
  }
  console.log("选中", e.target.checked, recordId, selectedRowKeys.value);
};
</script>
<template>
  <a-table :columns="columns" :dataSource="data" bordered rowKey="id">
    <!-- 自定义表头：AntDesign没有提供rowSelect合并行的方法，这里采用自定义 -->
    <template #headerCell="{ column }">
      <!-- customTitle：在column中设置为true，表示重写 -->
      <span v-if="column.customTitle">
        <a-checkbox
          :checked="selectedRowKeys.length === requestData.length"
          @change="onCheckAllChange"
          :indeterminate="
            selectedRowKeys.length != 0 &&
            selectedRowKeys.length < requestData.length
          "
        ></a-checkbox
      ></span>
      <!-- 默认显示为column中设置的title -->
      <span v-else>{{ column.title }}</span>
    </template>

    <template #bodyCell="{ column, record }">
      <!-- 重写操作列的显示 -->
      <template v-if="column.key === 'action'">
        <a-space>
          <a-button type="primary" @click="onEdit(record.id)">编辑</a-button>
          <a-button danger @click="onDelete(record.id)">删除</a-button>
        </a-space>
      </template>
      <!-- 重写RowSelection的行显示 -->
      <template v-else-if="column.key === 'id'">
        <a-checkbox
          :checked="selectedRowKeys.includes(record.id)"
          @change="(e) => onCheckChange(e, record.id)"
        ></a-checkbox>
      </template>
    </template>
  </a-table>
</template>

1.5 效果图

image.png