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