Secondary packaging of Element-Plus TableAndPage

Let’s start by sorting out what to use:

1) vue: {defineComponent, // writing ts requires this method to wrap openBlock, // create an initialization block createBlock, // create a block renderSlot, // renderSlot, which has four arguments: ($slot, 'inserted name' : string, passed parameters: object, fallback: () => VNodeArrayChildren, onSlotted: Boolean) resolveComponent, // resolve a component, which takes two arguments: (component name, maybeSelfReference: -- Boolean) withDirectives, // To create the directive resolveDirective, // to resolve the existing directive, which has one parameter: String) withCtx, // This method is used to record the insert vnode mergeProps, // this method is used to extend properties} 2) elemental-plus: {ElTable, table ElPagination, // pagination}Copy the code

Define the props needed for the component:

props: {
        /** * Component ID */
        idx: {
            type: String.default: 'diy-1'.require: true,},/** * the interface function to get data */
        ajaxData: {
            type: Function.default: () = > (() = > Promise),
            require: true,},/** * The maximum height of the Table. Valid values are numbers or heights in px units. * /
        maxHeight: {
            type: Number || String,},/** * Table currently loaded pages */
        currentPage: {
            type: Number.default: 1,},/** * Whether to load */
        isLoading: {
          type: Boolean.default: false
        },
        /** * Get data interface parameters */
        params: {
            type: Object.default: {
                page: 1.size: 20
            },
            require: true,},/** * The interface returns the key */ of the data list
        requsetKey: {
            type: Object.default: () = > ({
                key1: 'data'.key2: 'list'}}})Copy the code

Define the methods and properties required by the component:

setup (props, context) {
        const { ajaxData, params, requsetKey, currentPage, isLoading } = toRefs(props);

        const list = reactive<Array<IOBJ>>([]);
        const total = ref<number> (400);
        const pageSizes = reactive<Array<number> > ([1.10.20.30.40.50.60.70.80.90.100]);
        const loading = ref<boolean> (false);
        /* This method recursively gets the list */
        const indexKey = (keys: Array<string>, params: any.index: number = 0) :any= > {

            if (Array.isArray(params)) return params;

            params = params[requsetKey.value[keys[index]]]
            index++;

            return indexKey(keys, params, index);
        };

        const getList = async(pageNo? :number) => {
            pageNo && (params.value.page = pageNo);
            loading.value = isLoading.value;
            const keys = Reflect.ownKeys(requsetKey.value) as Array<string>;
            let res = await ajaxData.value(params.value);
            const data = indexKey(keys, res)
            list.splice(0); list.push(... data); total.value = res.data.total; loading.value =false;
        }
        onMounted(() = > {
            !params.value.page && Object.assign(params.value, {page: 1.size: 20});
        })

        const handleSizeChange = (val: number) = > {
            params.value.size = val;
            getList().catch();
        }

        const handleCurrentChange = (val: number) = > {
            params.value.page = val;
            getList().catch();
        }

        return {
            handleSizeChange,
            handleCurrentChange,
            total,
            getList,
            pageSizes,
            loading,
            list,
            // id: 'table-'}}Copy the code

Render function:

let see = 1;
script.__file = 'src/components/TableAndPage/index.ts';
script.install = (App: IOBJ) = > {
    App.component(script.name, script);
}

script.render = (ctx: IOBJ, cache: Array<any>, $props: IOBJ, $setup: Function, $data: IOBJ, $options: IOBJ) = > {
    ++see;
    const componentElPagination = resolveComponent(ElPagination.name);
    const componentElTable = resolveComponent(ElTable.name);
    const directiveLoading = resolveDirective('loading') as Directive;
    // console.log(ctx.idx, toDisplayString(ctx.idx));
    return(openBlock(), createBlock('div', {
        id: toDisplayString(ctx.idx),
        className: '423423'
    }, [
        createVNode('div', {id: toDisplayString(ctx.idx)}, {
                renderSlot(ctx.$slots, 'default', {
                    list: ctx.list,
                    loading: ctx.loading,
                    maxHeight: ctx.maxHeight
                }),
         ctx.$slots.inline && withDirectives((openBlock(), createBlock(componentElTable, mergeProps(ctx.$attrs,{
                    data: ctx.list,
                    border: true.maxHeight: ctx.maxHeight,
                }), {
                    inline: withCtx(() = > [
                        renderSlot(ctx.$slots, 'inline')].undefined)},8/* PROPS */['data'.'border'.'maxHeight'])), [
                    [directiveLoading, ctx.loading]
                ]),
        }, 512 /*NEED_PATCH*/),
        createVNode(componentElPagination, {
            onSizeChange: ctx.handleSizeChange,
            // currentPage: ctx.currentPage,
            onCurrentChange: ctx.handleCurrentChange,
            // 'onUpdate:currentPage': cache[0] || (cache[0] = ($event: number) => ctx.$emit('update:currentPage', $event)),
            pageSizes: ctx.pageSizes,
            pageSize: ctx.params.size,
            layout: "total, sizes, prev, pager, next, jumper".total: ctx.total,
        }, null.8['onSizeChange'.// 'currentPage',
            'onCurrentChange'.// 'onUpdate:currentPage',
            'pageSizes'.'pageSize'.'total']]),512 /* NEED_PATCH */))}export default script;
Copy the code

use

import {
    defineComponent,
    ref,
    createBlock,
    openBlock,
    createVNode,
    Transition,
    reactive,
    Fragment,
    renderList,
    withDirectives,
    vModelText,
    resolveComponent,
    withCtx,
    toDisplayString,
    onMounted,
    resolveDirective,
    getCurrentInstance,
    Directive, createTextVNode,
} from 'vue';

import {ElInput, ElButton, ElTable, ElTableColumn, ElRadioGroup, ElRadioButton} from 'element-plus';

import TableAndPage from '@/components/TableAndPage/index';
import { getLike } from '@/assets/api/song';
export default defineComponent({
    components: {
        'table-and-page': TableAndPage,
    },
    setup () {
        const current = ref(6);
        const TableAndPageRef = ref<IOBJ | null> (null);
        const params = reactive<IOBJ>({})



        onMounted(() = > {
            TableAndPageRef.value && TableAndPageRef.value.getList(1)})const componentTableAndPage = resolveComponent('table-and-page');
        const directiveLoading = resolveDirective('loading') as Directive;

        return (ctx: any, cache: any) = > {
           
            return (openBlock(), createBlock('div', {
                id: 'my-favorites'.class: 'favorites',
            }, [
                createVNode(componentTableAndPage, {
                        ajaxData: getLike,
                        params: params,
                        id: 'table'.ref: TableAndPageRef,
                        isLoading: true.// currentPage: current.value,
                                // 'onUpdate:currentPage': cache[3] || (cache[3] = ($event: number) => (current.value = $event)),
                    },
                    {
                        default: withCtx(({list, loading, maxHeight}: IOBJ) = > [
                            withDirectives(createVNode(componentElTable, {
                                data: list,
                                maxHeight: maxHeight,
                                onLoading: loading,
                            }, [
                                createVNode(componentElTableColumn, {
                                    prop:'song_name'.label: 'Music Title'
                                }),
                                createVNode(componentElTableColumn, {
                                    prop: 'singer_name'.label: 'singer'})].8['data'.'maxHeight']), [
                                [directiveLoading, loading]
                            ]),

                        ], undefined),
                        _: 1,},520 /* PROPS, NEED_PATCH */['ajaxData'.'params'.'onUpdate:currentPage'.'currentPage'.'isLoading']) ], HOISTED)); }}})Copy the code

Some things I didn’t go into as much detail as I did on the first article