二次封装elementTable

何夜读春秋

已于 2024-06-19 11:08:46 修改

阅读量205

点赞数 2

文章标签：前端 elementui

于 2024-06-17 09:24:59 首次发布

本文链接：https://blog.csdn.net/Qiang_7950/article/details/139732036

版权

父组件

<a_table :listData="userList" :propList="propList">
   <template #status="scope">
      <el-button :type="scope.row.enable ? 'success' : 'error'">
          {{ scope.row.enable ? '启用' : '禁用' }}
      </el-button>
   </template>
</a_table>


const userList = [
    {
        cellphone: 13666666666,
        createAt: "2023-06-23T07:40:02.000Z",
        departmentId: 4745,
        enable: 1,
        id: 177044190,
        name: "lebron",
        realname: "lebron111",
        roleId: 1,
        updateAt: "2023-06-23T07:45:09.000Z"
    },
    {
        cellphone: 13666666666,
        createAt: "2023-06-23T07:40:02.000Z",
        departmentId: 4745,
        enable: 1,
        id: 177044191,
        name: "lebron",
        realname: "lebron111",
        roleId: 1,
        updateAt: "2023-06-23T07:45:09.000Z"
    }
]
//表头
const propList = [
    { prop: 'name', label: '用户名', minWidth: '100' },
    { prop: 'realname', label: '真实姓名', minWidth: '100' },
    { prop: 'cellphone', label: '手机号码', minWidth: '120' },
    { prop: 'enable', label: '状态', minWidth: '100', slotName: 'status' },
    { prop: 'createAt', label: '创建时间', minWidth: '250', slotName: 'createAt' },
    { prop: 'updateAt', label: '更新时间', minWidth: '250', slotName: 'updateAt' }
]

子组件

<template>
    <div class="hy-table">
        <!-- listData 内容 -->
        <el-table :data="listData" style="width: 100%"
            :header-cell-style="{ backgroundColor: '#f6f7f9', 'text-align': 'center' }">
            <!-- 头部 -->
            <template v-for="propItem in propList" :key="propItem.prop">
                <el-table-column v-bind="propItem" align="center">
                    <template #default="scope">
                        <slot :name="propItem.slotName" :row="scope.row">
                            {{ scope.row[propItem.prop] }}
                        </slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
const props = defineProps({

    listData: {
        type: Array,
        require: true
    },
    propList: {
        type: Array,
        require: true
    },
    data: {}
})
</script>

<style scoped></style>