Antd之PC端把一些信息整合起来显示

1.<template>配置示例

<!-- 表格  start-->
<a-table
  :columns="columns"
  :data-source="tableData.list"
  :loading="loading"
  style="margin-top: 24px"
  :pagination="false"
  rowKey="id"
  :scroll="{ x: 1000 }"
>
  <template #baseInfo="{ record }">
    <div>活动名称：{{ record.activityName }}</div>
    <div>活动内容：{{ record.activityContent }}</div>
    <div>投入资源：{{ record.resourcesInvested }}</div>
    <div>促销类型：{{ record.promotionType }}</div>
  </template>
  <template #fiveLevelInfo="{ record }">
    <div>五级名称：{{ record.fiveLevelName }}</div>
    <div>五级地址：{{ record.fiveLevelAddress }}</div>
  </template>
</a-table>
<!-- 表格  end -->

2.<script>配置示例

const columns = [
  {
    title: "基本信息",
    dataIndex: "baseInfo",
    key: "baseInfo",
    slots: { customRender: "baseInfo" },
  },
  {
    title: "五级信息",
    dataIndex: "fiveLevelInfo",
    key: "fiveLevelInfo",
    slots: { customRender: "fiveLevelInfo" },
  },
];