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

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

<!-- 这里可以使用插槽 -->
<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: {

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

组件代码：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

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

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