ContestPortal/src/views/registrationGroup/components/stuDialog.vue

<template>
    <el-dialog :modelValue="modelValue" @update:modelValue="(newValue: boolean) => $emit('update:modelValue', newValue)"
        title="用户信息" width="800" draggable overflow>
        <div class="table-box">
            <el-table ref="multipleTableRef" border :data="tableData" @row-click="(row: any) => selectedRowId = row.id"
                append-to-body class="table" v-loading="loading">
                <el-table-column label="选择" width="55">
                    <template #default="scope">
                        <el-radio v-model="selectedRowId" :value="scope.row.id" />
                    </template>
                </el-table-column>
                <el-table-column label="序号">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column property="realname" label="真实姓名" sortable />
                <el-table-column property="work_no" label="学号" sortable />
            </el-table>
        </div>

        <template #footer>
            <div class="pagin-box">
                <el-pagination class="pagination" style="width: 100%;" v-model:current-page="params.pageNo"
                    v-model:page-size="params.pageSize" :page-sizes="[10, 20, 30, 40]"
                    layout="slo, total,slot,  sizes, prev, pager, next, jumper" :total="total" @change="getList" />
            </div>
            <div class="dialog-footer">
                <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
                <el-button type="primary"
                    @click="() => { $emit('update:modelValue', false); $emit('selected', tableData.find(o => o.id === selectedRowId) || {}); }">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { getMembersList } from '@/api/person';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const props = defineProps(['modelValue']);
const $emit = defineEmits(['update:modelValue', 'selected']);
const route = useRoute();

watch(() => props.modelValue, () => getList());

// 数据
const tableData = reactive<any[]>([]);
const selectedRowId = ref();

// 分页
const total = ref(0);

const params = reactive<any>({
    pageNo: 1,
    pageSize: 10,
    onlRepUrlParamStr: `annualCompid=${route.query.objName}`,
    entryFormat: '团队',
    id: route.query.id,
})


const loading = ref(false);
const getList = async () => {
    if (!props.modelValue) return
    loading.value = true;
    try {
        const res: any = await getMembersList(params);
        tableData.length = 0;
        tableData.push(...res.result.records);
        total.value = res.result.total;
    } catch (error: any) {
        ElMessage({
            message: error.message,
            type: 'error'
        })
    } finally {
        loading.value = false;
    }
}
</script>

<style lang="scss" scoped>
.form-box {
    padding: 0 60px;
}

.pagin-box {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;

    .pagination {
        padding: 0 24px;

        :deep() {
            .el-pagination__total {
                margin-right: auto;
            }

            li.number.is-active {
                background-color: #42D9AC;
                color: rgba(255, 255, 255, 0.9);
                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            }

            span.el-pagination__jump {
                background-color: #F3F3F3;
                padding: 2px 8px;
            }
        }
    }

}
</style>