基于ant-design-vue二次封装的table怎么处理slot

Question

项目中用到的ant-design-vue版本是2.1.2版本.
基于vue3.x+typescript想对a-table组件进行二次封装.
Xhtable.jsx代码如下:

import { defineComponent } from "vue";
import PropTypes from "../../_utils/vue-types";
const XhTable = defineComponent({
  name: "XhTable",
  props: {
    columns: PropTypes.array.def([]).isRequired,
    dataSource: PropTypes.array.def([]).isRequired,
    loading: PropTypes.bool.def(false),
  },
  setup() {},
  render() {
    const props = {
      ...this.$attrs,
      ...this.$props,
    };
    const slots = Object.keys(this.$slots).map((slot) => {
      return <template slot={slot}>{this.$slots[slot]}</template>;
    });
    const table = (
      <a-table {...{ ...props, scopedSlots: this.$slots }}>{slots}</a-table>
    );
    return <div>{table}</div>;
  },
});

export default XhTable;

使用方法如下:

<template>
  <div>
    <XhTable
      :dataSource="dataSource"
      :columns="columns"
    >
      <template #customAddressTitle>
        <span>紧急程度</span>
      </template>
    </XhTable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    const columns: any = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        dataIndex: 'address',
        key: 'address',
        slots: {
          title: 'customAddressTitle',
        },
      },
    ]
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ]
    return {
      dataSource,
      columns,
    }
  },
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我的问题是怎么去处理:

 <template #customAddressTitle>
   <span>紧急程度</span>
 </template>

这种情况.

这种方式自定义表头对应的title发现没作用.

Answer 1

用tsx的语法好像不太能处理这种情况，当然可能是我自己太菜。后面改用.vue的方式进行二次封装处理。简单代码如下：

<template>
  <div>
    <a-table 
      :dataSource="dataSource"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
    >
      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import PropTypes from "../../_utils/vue-types";
export default defineComponent({
  name: "XhTable",
  props: {
    columns: PropTypes.array.def([]).isRequired,
    dataSource: PropTypes.array.def([]).isRequired,
    loading: PropTypes.bool.def(false),
    pagination: PropTypes.bool.def(false)
  },
  setup() {},
});

</script>