vue3 + Element-plus 表格二次封装

<template>
   <div class="table-toolbar">
      <!--顶部左侧区域-->
      <div class="table-toolbar-left">
         <slot name="tableTitle"></slot>
      </div>
      <!--顶部左侧区域-->
      <div class="flex items-center table-toolbar-right">
         <slot name="toolbar"></slot>
      </div>
   </div>
   <div class="custom-table">
      <el-table v-bind="$attrs" :data="dataSource" :show-summary="showSummary" :summary-method="getSummaries" :default-sort="defaultSort">
         <template v-for="(col,index) in columns" :key="index">
            <el-table-column :type="col.type"
                             :prop="col.key"
                             :label="col.title"
                             :width="col.width"
                             :min-width="col.minWidth"
                             :align="col.align"
                             :fixed="col.fixed"
                             :header-align="col.headerAlign"
                             :show-overflow-tooltip="col.tooltip"
                             :class-name="col.className"
                             :render-header="col.renderHeader"
            >
               <template v-if="col.slots && col.slots.customTitle" #header="{column, $index }">
                  <slot :name="col.slots.customTitle" v-bind="{ column, $index }"></slot>
               </template>
               <template v-if="col.slots && col.slots.customKey" #default="scope">
                  <slot :name="col.slots.customKey" v-bind="scope"></slot>
               </template>
            </el-table-column>
         </template>
         <template #append>
            <slot name="append"></slot>
         </template>
      </el-table>
   </div>
</template>
<script>
export default {
    props: {
        dataSource: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        showSummary: {
            type: Boolean,
            default: false
        },
        summaryData: {
            type: Object,
            default: () => { }
        },
        defaultSort: {
            type: Object,
            default: () => { }
        }
    },
    setup (props) {
        function getSummaries ({ columns }) {
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计(元)：'
                    return
                }

                if (props.summaryData[column.property]) {
                    sums[index] = props.summaryData[column.property]
                }

            })
            return sums

        }
        return {
            getSummaries
        }
    }
}
</script>
<style lang="scss" scoped>
.table-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    &-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
    }
    &-right {
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
}
.custom-table {
    // border-top: 1px solid #dcdee2;
    // border-left: 1px solid #dcdee2;
    // border-right: 1px solid #dcdee2;
}
</style>