封装公共卡片加分页组件

在vue项目中，有很多的卡片列表加分页的页面，它们除了卡片内的字段值不一样，列表接口不一样，其它都差不多 可以这样，卡片的内容就用默认插槽，值用作用域插槽抛出来。ui和渲染和分页逻辑都复用 接口和参数都从外面传进来，这样每次渲染页面只要把接口和接口的参数传进去

<template> <div> <ul> <li v-for="list" :key=""><li/> <ul/> </div> </template>

export default {
    name: '',
    props: {
        api: {
            type: Function,
            default: () => { }
        },
        queryParams: {
            type: Object,
            default: () => ({}),
        }
    },
    data () {
        return {
            list:[],
            total: 0
        };
    },
    created () { 
        this.getTableList()
    },
    methods: {
        async getTableList () {
            try {
                const response = await this.api(this.queryParams)
                const data = response.data.data
                this.list = data.rows
                this.total = data.total
            } catch (error) {
                console.log(error)
            }
        },
    }
};
</script>