#Vue 3 + ts + antd table表格的使用（嵌套 子表格版）

1. 嵌套子表格的使用

<template>
  <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>Publish</a>
      </template>
    </template>
    <template #expandedRowRender="{ record }">
      <a-table :columns="innerColumns" :data-source="record.innerData" :pagination="false">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span class="table-operation">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>Action 1</a-menu-item>
                    <a-menu-item>Action 2</a-menu-item>
                  </a-menu>
                </template>
                <a>
                  Mores
                  <down-outlined />
                </a>
              </a-dropdown>
            </span>
          </template>
        </template>
      </a-table>
    </template>
  </a-table>
</template>
<script setup lang="ts">

import { DownOutlined } from '@ant-design/icons-vue';
import {fetchOrders} from "@/service/order/order";
import {CTYPE, Utils} from "@/utils";

const columns = [
  { title: '联系人', dataIndex: 'contacts', key: 'contacts' },
  { title: '创单时间', dataIndex: 'createOrderTime', key: 'createOrderTime' },
  { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' },
  { title: '订单类型', dataIndex: 'orderType', key: 'orderType' },
  { title: '订单id', dataIndex: 'ordersId', key: 'ordersId' },
  { title: '原始金额', dataIndex: 'originAmount', key: 'originAmount' },
  { title: '支付时间', dataIndex: 'payTime', key: 'payTime' },
  { title: '实收金额', dataIndex: 'receiptAmount', key: 'receiptAmount' },
  { title: '商品名称', dataIndex: 'skuName', key: 'skuName' },
  { title: '商品类型', dataIndex: 'skuType', key: 'skuType' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'operation' },
];
// 请求数据源 的数据类型 
interface DataItem {
  key: number;
  name?: string;
  platform?: string;
  version?: string;
  upgradeNum?: number;
  creator?: string;
  createdAt?: string;

  certificate?: string;
  contacts?: string;
  createOrderTime?: number;
  orderStatus?: number;
  orderType?: number;
  ordersId?: string;
  originAmount?: number;
  payTime?: number;
  receiptAmount?: number;
  skuName?: string;
  skuType?: string;
  status?: number;
  innerData: innerDataItem[]; // 新增属性
}
// 子表格
interface innerDataItem {
  key: number;
  order_item_id: string;
  certificate_id: string;
  item_status: number;
  item_update_time: number;
  refund_amount: number;
  refund_time: number;
}

// 分页的一些内容，对demo 可以忽略
const pagination = ref<COMMON.Pageable>({
  pageSize: CTYPE.pagination.pageSize,
  current: 1,
  total: 0
});
const orderQo = reactive<ORDER.OrderQo>({
  status: 1,
  sortPropertyName: 'id',
  sortAscending: false
});


// 响应数据
let contentData  = reactive<any>([]);
const data: DataItem[] = reactive([]);
const innerData: innerDataItem[] = reactive([]);


const innerColumns = [
  { title: '券维度的订单号', dataIndex: 'order_item_id', key: 'order_item_id' },
  { title: '券码号', dataIndex: 'certificate_id', key: 'certificate_id' },
  { title: '券维度订单状态', dataIndex: 'item_status',key: 'item_status' },
  { title: '退款金额', dataIndex: 'item_update_time', key: 'item_update_time' },
  { title: '退款时间', dataIndex: 'refund_amount', key: 'refund_amount' },
  { title: '券维度订单更新时间', dataIndex: 'refund_time', key: 'refund_time' },
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation',
  },
];
// 加载数据
const loadData = async () => {
  try {
    const result = await fetchOrders({
      ...orderQo,
      pageNumber: pagination.value.current,
      pageSize: pagination.value.pageSize,
    }) as ORDER.OrderPager;
    const { content = [] } = result;
    // 重点：获取到后台数据后，对数据进行处理，请重点看下面的数据处理思路！！！
    contentData = content;

    // 重置 data 和 innerData
    data.length = 0;
    innerData.length = 0;
    // 遍历数据
    for (let i = 0; i < contentData.length; ++i) {
      const outerItem: DataItem = {
        key: i,
        contacts: contentData[i].contacts,
        createOrderTime: contentData[i].createOrderTime,
        orderStatus: contentData[i].orderStatus,
        orderType: contentData[i].orderType,
        ordersId: contentData[i].ordersId,
        originAmount: contentData[i].originAmount /100  ,
        payTime: contentData[i].payTime,
        receiptAmount: (contentData[i].receiptAmount /100) ,
        skuName: contentData[i].skuName,
        skuType: contentData[i].skuType,
        status: contentData[i].status,
        innerData: [], // 初始化内层数据为空数组
      };

      // 解析当前订单的数据
      let jsondata: Array<{
        key: number;
        certificate_id: string;
        order_item_id: string;
        refund_time: number;
        refund_amount: number;
        item_status: number;
        item_update_time: number;
      }> = [];

      try {
        jsondata = JSON.parse(contentData[i].certificate);
      } catch (error) {
        console.error(`Failed to parse certificate data of order at index ${i}:`, error);
        continue; // 如果解析失败，跳过该订单
      }
      // 填充内层数据并将其关联到外层数据项
      for (let k = 0; k < jsondata.length; ++k) {
        outerItem.innerData.push({
          key: k,
          order_item_id: jsondata[k].order_item_id,
          certificate_id: jsondata[k].certificate_id,
          item_status: jsondata[k].item_status,
          item_update_time: jsondata[k].item_update_time,
          refund_amount: jsondata[k].refund_amount,
          refund_time: jsondata[k].refund_time,
        });

      }
      // 将外层数据项添加到 data 数组中
      data.push(outerItem);
      console.log("innerDatas的值", outerItem.innerData);
    }
  } catch (error) {
    // loading.value = false;
  }
}

// 初始化渲染数据
// onMounted 生命周期钩子会在组件挂载后立即执行，确保在组件渲染前完成数据的获取和初始化工作，进而使得内外层表格能正确渲染数据
onMounted(async () => {
  await loadData();
});

</script>