描述:该框架许多默认配置好像还不支持,一般都是挨个使用挨个配置。我的项目中也遇到了类似的情况,但是当需求发生变化时,代码所有的组件使用则都需要修改,这种方式真的很不礼貌。
《我为了一口醋包了顿饺子》
需求是将系统所有的分页条数修改成自定条数。如下,就需要挨个修改定义.......
思考再三,决定还是封装一个组件
<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');至此,无缝替换......[撒花],一键二连唔~
注:该框架其它组件也可以使用类似方法。



















