ant-design-vue 1.x 下table关于slot最佳实践

官方例子没有体现出来slot的最佳用法

<template>
  <a-table :columns="columns" :data-source="data">
    <span slot="tags" slot-scope="tags">
      <a-tag v-for="tag in tags" :key="tag">
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
];
</script>

• 问题1：slot-scope已经废弃，不论是volar还是vue2.7都不是很兼容
• 问题2：官方例子columns配置和表格分离，语义化不是很好

环境

• ant-design-vue: 1.7.8
• vue: 2.7
• volar

最佳实践

    <a-table size="small" bordered :loading="loading" :dataSource="dataSource" :pagination="false" rowKey="group">
      <a-table-column title="分组" dataIndex="group" width="120px" />
      <a-table-column title="关卡数量" dataIndex="count" width="100px" />
      <a-table-column title="创建时间" dataIndex="createTime" width="165px">
        <template #customRender="timestamp">{{ datetime(timestamp) }}</template>
      </a-table-column>
      <a-table-column title="创建人" dataIndex="sso" width="100px" />
      <a-table-column title="操作" dataIndex="op" width="160px">
        <template #customRender="noused, record">
          <a-button size="small" @click="onShowLevelModal(record.group)">编辑关卡映射表</a-button>
        </template>
      </a-table-column>
    </a-table>

以上写法

• 支持v-slot用法，
• columns配置更加统一

完