关于Vue封装table组件的看法

我做的简单的封装table表单

 首先这是我父组件user.vue的配置项，传入子组件

// 表单label是表格表头，prop是表格每项内容，type是表格每项内容的类型
let obj = ref([
    {
        label: "用户名",
        prop: "name",
        type: "",
    },
    {
        label: "真实姓名",
        prop: "realname",
        type: "",
    },
    {
        label: "手机号",
        prop: "cellphone",
        type: "",
    },
    {
        label: "状态",
        prop: "enable",
        type: "state",
    },
    {
        label: "创建时间",
        prop: "createAt",
        type: "Ctime",
    },
    {
        label: "更新时间",
        prop: "updateAt",
        type: "Ctime",
    },
    {
        label: "操作",
        // prop: "operation",
        type: "button",
    }
])
// 表格数据,因为这是调取的后端数据所以我就简单模拟了两条
let tableData = ref([
    {
        cellphone: 45676543,
        createAt: "2024-06-15T02:06:40.000Z",
        departmentId: 6830,
        enable: 1,
        id: 177049678,
        name: "sgq",
        realname: "sgq",
        roleId: 3,
        updateAt: "2024-06-15T02:33:29.000Z"
    },
    {
        cellphone: 45676543,
        createAt: "2024-06-15T02:06:40.000Z",
        departmentId: 6830,
        enable: 1,
        id: 177049678,
        name: "sgq",
        realname: "sgq",
        roleId: 3,
        updateAt: "2024-06-15T02:33:29.000Z"
    }
])

 我table中的配置

// 表格操作,我会判断是什么type,再操作table表单
<el-table :data="prop.tableData" border>
<el-table-column type="selection" width="55" />
<el-table-column type="index" width="100" label="序号" />
<el-table-column v-for="item in obj" :label="item.label" :key="item">
    <template #default="scope">
        <div v-if="item.type == 'state'">
            <el-button type="primary" v-if="scope.row[item.prop] 
            == 1" size="small">启用</el-button>
            <el-button type="danger" v-if="scope.row[item.prop] 
            == 0" size="small">禁用</el-button>
        </div>
        <div v-if="item.type == ''">
            {{ scope.row[item.prop] }}
        </div>
        <div v-if="item.type == 'Ctime'">
            {{ formDateTime(scope.row[item.prop]) }}
        </div>
        <div v-if="item.type == 'button'">
            <el-button type="primary" size="small" 
            @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" 
            @click="del(scope.row.id)">删除</el-button>
        </div>
    </template>
</el-table-column>
</el-table>

各个父组件配置数据，调用就可以。你们如果由不同类型的操作，可以添加不同的type