如何二次封装Element-Plus table组件

最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下，记录一下，那么现在开始了。
父页面代码：

<!-- 这里可以使用插槽 -->
<tableData ref="refTable" :config="table_config">
    <template #buts>
        <el-button type="primary" @click="addCost">添加车辆</el-button>
    </template>
    <template #operate="{ row }">
        <el-button link type="primary" size="small" @click="hDetail(row)">查看</el-button>
        <el-button link type="primary" size="small" @click="hDel(row.id)">删除</el-button>
    </template>
</tableData>
             
const table_config = ref({
  thead: [
    {
      label: '车牌号码', prop: "carNumber"
    },
    {
      label: '收费类型', prop: "chargeType",type: 'payment',
      callback: (row, prop) => {
        return charge_type[row[prop]]
      }
    },
    {
      label: '停车总时长', prop: "parkingTime"
    },
    {
      label: '缴纳费用(元)', prop: "actualCharge"
    },
    {
      label: '缴纳状态', prop: "paymentStatus", type: 'payment',
      callback: (row, prop) => {
        return payment_status[row[prop]]
      }
    },
    {
      label: '缴纳方式', prop: "paymentMethod", type: 'payment',
      callback: (row, prop) => {
        return payment_method[row[prop]]||'--'
      }
    },
    {
      label: '缴纳时间', prop: "paymentTime"
    },
  ],
  // 是否显示二级table
  dropDown: false,

  // 是否显示序号
  // num:false,

  // 多选
  select: false,
  url: '/parking/payment/list',
  params: {

  }
})

组件代码：

<template>
    <div class="editEnterprise">
        <!-- 添加或删除 -->
        <slot name="buts" :row="ids"></slot>
        <el-table :row-key="row => row.id" @selection-change="handleSelectionChange" :data="table_data" :border="false"
            style="width: 100%">
            <!-- 是否显示二级table -->
            <slot v-if="table_config.dropDown" name="expand" :row="{ row }">
                <!-- 插槽 -->
            </slot>
            <!-- 是否显示多选 -->
            <el-table-column reserve-selection v-if="table_config.select" type="selection" width="55" />
            <!-- 是否显示序号 -->
            <el-table-column v-if="true" label="序号" :index="1" type="index" width="70"></el-table-column>
            <!-- 状态项 -->
            <template v-for="item in table_config.thead" :key="item.prop">
                <el-table-column v-if="type.includes(item.type)" :label="item.label" :prop="item.prop">
                    <template #default="{ row }"><span>{{ item.callback && item.callback(row, item.prop)
                    }}</span></template>
                </el-table-column>
                <!-- 正常显示 -->
                <el-table-column v-else :label="item.label" :prop="item.prop" />
            </template>
            <!-- 操作列 -->
            <el-table-column v-if="table_config.isoperate" fixed="right" label="操作">
                <template v-slot="{ row }">
                    <slot name="operate" :row="row" />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-col :offset="14">
            <el-pagination v-model:current-page="table_config.page" v-model:page-size="table_config.pageSize"
                :page-sizes="[1, 2, 10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total,  prev, pager, next, sizes, jumper" :total="table_config.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" /></el-col>
    </div>
</template>
<script setup>
name: 'tableData'
import { watch, ref, onMounted } from 'vue'
import { getTableData } from '@/api/common'
const type = ['card', 'building', 'payment', 'charging', 'duration', 'pole', 'working', 'handle', 'staff']
// 数据-------------------------------------------
const table_data = ref([])
const table_config = ref({
    thead: [],
    dropDown: true,
    num: true,
    select: true,
    isoperate: true,
    url: '',
    total: 0,
    page: 1,
    pageSize: 10,
    params: {}
})
const ids = ref([]);
// 传入配置
const props = defineProps({
    config: {
        type: Object,
        default: () => { }
    },
})
// 方法--------------------------------------------

// 当前页数改变
const handleCurrentChange = (val) => {
    table_config.value.page = val
    loadData()
    // console.log(val);
}
// 每页显示个数改变
const handleSizeChange = (pageSizes) => {
    table_config.value.pageSize = pageSizes
    table_config.value.page = 1
    loadData()
    // console.log(pageSizes);
}
// 表格多选获取选中的数据
const handleSelectionChange = (selection) => {
    ids.value = selection.map(row => row.id).join(',');
    console.log(ids.value);
};
// 初始化数据
const initConfig = () => {
    for (let key in props.config) {
        if (Object.keys(table_config.value).includes(key)) {
            table_config.value[key] = props.config[key]
        }
    }
    console.log('有数据了', table_config.value.params);
    // 配置项配置完成后读取数据
    loadData()
}
const loadData = () => {
    let requestData = {
        url: table_config.value.url,
        data: {
            page: table_config.value.page,
            pageSize: table_config.value.pageSize,
            total: table_config.value.total,
            ...table_config.value.params
        }
    }
    getTableData(requestData).then(({ data }) => {
        console.log(data)
        if (data) { table_data.value = data.rows, table_config.value.total = data.total }
    })
}

defineExpose({ initConfig })
// onMounted(() => { })
// 监听器
watch(props.config, () => {
    initConfig()
}, { immediate: true, deep: true })

</script>

<style lang="scss" scoped>
.editEnterprise {
    margin: 15px 0px;
}

// button样式
.editEnterprise {
    margin: 15px 0;
}

// 分页样式穿透
:deep(.el-pagination) {
    padding: 10px 0;
}
</style>

效果：这里分页也在组件处理了，所以也无需自己在弄分页了

这里取了个巧，因为后台接口要传的必传参几乎一样而且都是GET请求，我就把请求也直接页封装在组件里了，只需要传一个请求地址就可以正常渲染，项目的批量删除也在组件内部处理了，且表单数据也可以直接传入到组件的params属性，这样查询时也可以动态更新数据，封装的不是那么的全面，欢迎各位路过的大佬们给出指点和建议，互相学习进步！