el-table组件的简易封装

前言

最近干活，老感觉公司低代码平台的el-table组件封装的不太好用，遂翻了下上家公司项目的代码，把它贴出来，一个是记录，另一个也是分享，不足之处请大佬们指正

子组件

<template>
    <el-table :data="tableData" show-overflow-tooltip>
        <el-table-column v-for="item in headerConfig" :key="item.prop" align="center" :label="item.label" :prop="item.prop">
            <template slot-scope="scope">
                <template v-if="item.prop">
                    {{ scope.row[item.prop] }}
                </template>
                <template v-else>
                    <slot :row="scope.row" />
                </template>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        tableData: {
            type: Array,
            default() {
                return [];
            }
        },
        headerConfig: {
            type: Array,
            default() {
                return [];
            }
        }
    }
};
</script>
<style lang="scss"></style>

el-table组件其他属性和方法可以后期自由添加，这里仅做参考！

父组件

<template>
    <div>
        <div>
        	<!-- 筛选栏-->
            <el-row></el-row>

            <!-- 表格 -->
            <v-table :tableData="filterTtableData" :headerConfig="headerConfig">
                <template v-slot:default="scope">
                    <el-button type="text" @click="delelFile(scope.row)">删除</el-button>
                </template>
            </v-table>
        </div>
    </div>
</template>

<script>
import vTable from '@/components/Table';
export default {
    data() {
        return {
            headerConfig: [
                {
                    label: '文件名称',
                    prop: 'name'
                },
                {
                    label: '操作人',
                    prop: 'uploadUserName'
                },
                {
                    label: '操作时间',
                    prop: 'uploadTime'
                },
                {
                    label: '操作'
                }
            ],
            tableData: [], // 表格数据
            currentPage: 1,
        };
    },
    components: {
        vTable
    },
    computed: {
        // 搜索过滤后的table数据
        filterTtableData() {
            let newList = this.tableData;
            return newList.map((item) => {
                return {
                    ...item,
                    uploadTime: item.uploadTime // 可处理单个属性
                };
            });
        }
    },
    methods: {
        // 删除
        delelFile(val) {
        	console.log(val, "del")
        }
    }
};
</script>
<style lang="scss"></style>