函数式二次封装element组件

element的组件能很大的满足我们的很多需求，但是有些时候我们想要有自己的样式风格，但是又想在功能方面能复用，如果用常规二次封装，代码会显得比较复杂，用函数式封装的话就比较简洁，看起来比较舒服，接下来以table为例进行封装：

import { ElTable } from 'element-plus';
import { h } from 'vue';
import type { FunctionalComponent } from 'vue';
import './index.scss';

export const MyTable: FunctionalComponent<
InstanceType<typeof ElTable>['$props'],
Exclude<typeof ElTable['$emits'], undefined>
> = (props, context) =>
    h(
        ElTable,
        {
            ...context.attrs,
            ...props,
            'class': 'my-table',
        },
        context.slots,
    );

import { ElTableColumn } from 'element-plus';
import { h } from 'vue';
import type { FunctionalComponent } from 'vue';
import './index.scss';

export const MyTableColumn: FunctionalComponent<
InstanceType<typeof ElTableColumn>['$props'],
Exclude<typeof ElTableColumn['$emits'], undefined>
> = (props, context) =>
    h(
        ElTableColumn,
        {
            ...context.attrs,
            ...props,
            'class': 'my-table-column',
        },
        context.slots,
    );

这样子就能在不动用其功能的状况下二次封装成自己想要的表格了！