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

<template>
    <div>
        <el-button type="primary" icon="Plus" @click="add" class="btn">新增</el-button>
        <el-button type="primary" icon="Plus" @click="del" class="btn" v-show="isSele">删除</el-button>
        <div class="table-box">
            <el-table ref="multipleTableRef" border :data="tableData"
                @select="(selection: any[]) => isSele = !!selection.length" 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-cascader :modelValue="row.teacherType"
                            @update:modelValue="(arr: any[]) => row.teacherType = 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 @click="openDialog(row)" v-model="row.teacherName" 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-input v-model="row.teacherXl" placeholder="请输入学历" />
                    </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.teacherZc" placeholder="请输入职称" />
                    </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.teacherZy" placeholder="请输入专业" />
                    </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.teacherYjfx" placeholder="请输入研究方向" />
                    </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.teacherPhone" placeholder="请输入手机号" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <tea-dialog v-model="visible" @selected="handleSelected" />
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import teaDialog from './teaDialog.vue';
import { ClusterOutlined } from '@ant-design/icons-vue';
import { ElMessage } from 'element-plus';
const options = [
    {
        value: '1',
        label: '指导老师',
    },
    {
        value: '2',
        label: '领队老师',
    },
]

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

const add = () => {
    const length = tableData.push({
        teacherName: '',
        teacherPhone: '',
        teacherType: '',
        teacherXl: '',
        teacherYjfx: '',
        teacherZc: '',
        teacherZy: '',
        teacherid: '',
    });
    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.id === row.id)) {
        ElMessage({
            message: '用户不能多选!',
            type: 'error'
        })
        return
    }
    target.value.teacherName = row.realname;
    target.value.teacherXl = row.exp_title;
    target.value.teacherZc = row.exp_zc;
    target.value.teacherZy = row.teamajor;
    target.value.teacherYjfx = row.exp_yjfx;
    target.value.teacherPhone = row.phone;
    target.value.teacherid = row.user_id;
}

// 提交

const submit = () => tableData;
defineExpose({ submit })

// 删除逻辑
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>