antd-design-vue Table组件全局配置（分页器...）

描述：该框架许多默认配置好像还不支持，一般都是挨个使用挨个配置。我的项目中也遇到了类似的情况，但是当需求发生变化时，代码所有的组件使用则都需要修改，这种方式真的很不礼貌。

《我为了一口醋包了顿饺子》

需求是将系统所有的分页条数修改成自定条数。如下，就需要挨个修改定义.......

思考再三，决定还是封装一个组件

 
<template>
  
  <Table v-bind="$attrs" v-on="$listeners" :pagination="props.pagination">
    
    <template v-for="slotName in slotNames" #[slotName]="body">
      
      <template v-if="slots[slotName]">
        <slot :name="slotName" v-bind="body"/>
      template>
    template>
  Table>
template>
 
<script lang="ts">
import {defineComponent} from 'vue';
// 单独引入（否则OOM！）
import {Table} from 'ant-design-vue';
 
export default defineComponent({
  inheritAttrs: false,
  props: {
    pagination: {type: Object, default: false},// 不需要传递的属性
  },
  components: {
    Table
  },
  setup(props, {slots}) {
    // 获取所有插槽
    const slotNames = Object.keys(slots);
    // 自定义分页器大小（为了这口醋，包了顿饺子）
    if (props.pagination) props.pagination.pageSizeOptions = ['5', '10', '20', '50'];
    return {
      slots,
      props,
      slotNames
    }
  },
})
script>

还没完，你代码已经引入很多的a-table的情况，就需要在main.js全局注册该组件：

 
import {createApp} from 'vue';
import Antd from 'ant-design-vue';
import AntTable from "@/components/AntTable.vue";
 
const app = createApp(App);
app.use(Antd);
app.component('a-table', AntTable);// 覆盖组件
app.mount('#app');

至此，无缝替换......[撒花]，一键二连唔~

注：该框架其它组件也可以使用类似方法。