通用表格组件改造记录

通用表格组件

场景说明

参照 ruoyi-vue 完成权限管理系统后台时，在大部分页面上都需要使用到表格。ruoyi-vue 做法是每个表格都单独完成，观察每个表格样式很接近，遂想封装一个通用表格组件来取代之前的代码。

以下是 ruoyi-vue 的页面：

通用表格组件

极其糟糕的思路一：将通用表格组件仅抽取出一个 vue 文件，传入表格列表数据通过 v-for 循环生成 el-table-column，针对不同的列如状态，操作列需要实现不一样的样式和功能，采用 v-if 来判断。当多复用几个表格场景后就发现此种方式纯纯屎山，复用场景一多，v-if,v-else-if 看着都头皮发麻，在通用组件中还参杂业务代码，各种坑是一个不差。以下是屎山代码，谨以为鉴：

<template>
    <div>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain @click="handleAdd">
                    <icon icon="svg-icon:add" />
                    {
  { $t('common.add') }}
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain @click="handleExport">
                    <icon icon="svg-icon:export" />
                    {
  { $t('common.export') }}
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain @click="handleExport('template')">
                    <icon icon="svg-icon:export" />
                    {
  { $t('common.importTemplate') }}
                </el-button>
            </el-col>

            <el-col :span="1.5">
                <el-upload v-model:file-list="fileList" class="upload-demo" method="post" :on-success="handleUploadSuccess"
                    :on-error="handleUploadError" :show-file-list="false" :action="uploadRequestConfig.uploadUrl"
                    :headers="uploadRequestConfig.headers">
                    <el-button type="success" plain>
                        <icon icon="svg-icon:import" />
                        {
  { $t('common.import') }}
                    </el-button>
                </el-upload>
            </el-col>
        </el-row>
        <el-table v-loading="props.isLoading" :data="props.tableList">
            <el-table-column type="selection" width="55" align="center" />
            <template v-for="rows in props.tableHeaderConfig" :key="rows.label">

                <el-table-column :label="rows.label" align="center" :width="rows.width" v-if="rows.label == $t('common.status')">
                    <template #default="scope">
                        <el-switch active-value="1" inactive-value="0" v-model="scope.row.status"
                            @change