vue3插槽的使用

Ant Design的table废弃了column.slots, 新增 v-slot:bodyCell,

用dataIndex对应列

<template>
  
      <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
        :data-source="data" :pagination="false">
        <template v-slot:bodyCell="{ column, record }">
          <div v-if="column.dataIndex === 'proction'">
           <p>{{ record.proction }}</p>
           <p>{{ record.proctionDay }}</p>
          </div>
          <div v-if="column.dataIndex === 'delete'">
            <span @click="detele(record.key)">{{ record.delete }}</span>
          </div>
        </template>
      </a-table>
  </template>
  <script lang="ts" setup>
  type Key = string | number;
  
  interface DataType {
    key: Key;
    proction: string;
    delete: string,
    proctionDay: string
  }
  
  const columns = [
   {
      title: '标题',
      dataIndex: 'proction',
  
    },
    {
      title: '删除',
      dataIndex: 'delete'
    }
  ];
  
  const data: DataType[] = [];
  for (let i = 0; i < 2; i++) {
    data.push({
      key: i,
      proction:"3月25日",
      proctionDay:'星期六',
      delete: '删除'
    });
  }

  </script>