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

<template>
    <div>
        <el-button type="primary" icon="Plus" @click="add" class="btn">新增</el-button>
        <el-button type="danger" icon="Delete" @click="del" class="btn" v-show="isSele">删除</el-button>
        <div class="table-box">
            <el-table ref="multipleTableRef" @select="(selection: any[]) => isSele = !!selection.length" border
                :data="tableData" class="table" height="276px">
                <el-table-column type="selection" width="55" />
                <el-table-column label="#" width="55">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #header>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span style="margin-left: 10px;">用户</span>
                    </template>
                    <template #default="{ row }">
                        <el-input @click="openDialog(row)" v-model="row.realname" placeholder="请选择"
                            :prefix-icon="ClusterOutlined" />
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #header>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span style="margin-left: 10px;">是否队长</span>
                    </template>
                    <template #default="{ row }">
                        <el-cascader :modelValue="row.captain" @update:modelValue="(arr: any[]) => row.captain = arr[0]"
                            :options="options" />
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #header>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span style="margin-left: 10px;">队员序号</span>
                    </template>
                    <template #default="{ row }">
                        <el-input v-model="row.teamSeq" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <stu-dialog v-model="visible" @selected="handleSelected" />
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import stuDialog from './stuDialog.vue';
import { ClusterOutlined } from '@ant-design/icons-vue';
import { ElMessage } from 'element-plus';
const options = [
    {
        value: '1',
        label: '是',
    },
    {
        value: '0',
        label: '否',
    },
]

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

const add = () => {
    const length = tableData.push({
        realname: '',   // 用户
        captain: '',    // 是否队长
        teamSeq: '',    // 队员序号
        userId: '',     // id
    });
    openDialog(tableData[length - 1]);
}

// 当下打开dialog的数据源，在打开dialog时赋值
const target = ref<any>();
const openDialog = (row: any) => {
    visible.value = true;
    target.value = row;
}

const visible = ref(false);

// 像数据源中添加数据
const handleSelected = (row: any = {}) => {
    if (tableData.some(o => o.userId === row.id)) {
        ElMessage({
            message: '用户不能多选!',
            type: 'error'
        })
        return
    }

    target.value.realname = row.realname;
    target.value.userId = row.id;
}

// 提交
defineExpose({ submit: () => tableData })

// 删除逻辑
const multipleTableRef = ref<any>(null);
const isSele = ref(false);
const del = () => {
    const rows = multipleTableRef.value.getSelectionRows()
    rows.forEach((row: any) => {
        const index = tableData.indexOf(row);
        if (index === -1) return;
        tableData.splice(index, 1);
    })
}
</script>

<style lang="scss" scoped>
.btn {
    margin-bottom: 20px;
}

.table-box {
    .table {
        width: 100%;
    }

    .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>