portal/src/views/management/RegistrationManagement/components/Table.vue

<template>
    <el-table
            :data="tableData"
            border
            class="table"
            height="auto"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                fixed
                width="55">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号"
                width="360">
        </el-table-column>
        <el-table-column
                prop="stateName"
                label="状态"
                width="360">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="注册时间"
                width="360">
        </el-table-column>

        <el-table-column
                label="操作"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-button v-if="scope.row.state === 0" type="text" @click="handleAudit(scope.row)">处理</el-button>
                <el-button v-else type="text" @click="handleUnAudit(scope.row)">撤回</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name:     'Table',
        inject:   {
            tableServiceData:      {
                type:    Object,
                default: () => {
                },
            },
            paginationServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },
        computed: {
            tableData() {
                return this.tableServiceData.myData;
            },
        },
        methods:  {
            handleSelectionChange(data) {
                const arr = [];
                data.forEach(item => {
                    arr.push(item.deId);
                });
                this.$emit('select-change', arr);
            },
            handleAudit(data) {
                this.$emit('audit', data);
            },
            handleUnAudit(data) {
                this.$emit('unAudit', data);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .table {
        ::v-deep .is-leaf {
            .cell {
                text-align: center;
            }
        }

        ::v-deep .el-table-column--selection {
            .cell {
                text-align: center;
            }
        }
    }
</style>