<!-- 1. JS 里准备一个响应式数组 -->
const students = ref([
  { id: 1, username: '2510101', name: '小林', major: '软件工程' }
])

<!-- 2. 模板里交给 el-table，用 prop 指明取值字段 -->
<el-table :data="students" border stripe>
  <el-table-column prop="username" label="学号" width="140" />
  <el-table-column prop="name"     label="姓名" width="120" />
  <el-table-column prop="major"    label="专业" />
</el-table>

students.value.push({ id: 4, username: '2510104', name: '小张', major: '大数据' })

<script setup>
import { ref, computed } from 'vue'
import {
  ElButton, ElInput, ElTable, ElTableColumn, ElTag, ElDialog,
  ElForm, ElFormItem, ElSelect, ElOption, ElMessage, ElMessageBox
} from 'element-plus'
import 'element-plus/dist/index.css'

const title = ref('班级学员信息管理')

const students = ref([
  { id: 1, username: '2510101', name: '小林', major: '软件工程', status: '在读' },
  { id: 2, username: '2510102', name: '张伟', major: '大数据技术', status: '在读' },
  { id: 3, username: '2510103', name: '王芳', major: '软件工程', status: '请假' }
])

const keyword = ref('')
const dialogVisible = ref(false)
const form = ref({ username: '', name: '', major: '软件工程', status: '在读' })

const filteredStudents = computed(() => {
  const kw = keyword.value.trim().toLowerCase()
  if (!kw) return students.value
  return students.value.filter(
    s => s.username.toLowerCase().includes(kw) || s.name.toLowerCase().includes(kw)
  )
})

const openDialog = () => {
  form.value = { username: '', name: '', major: '软件工程', status: '在读' }
  dialogVisible.value = true
}

const submitForm = () => {
  if (!form.value.username.trim() || !form.value.name.trim()) {
    ElMessage.warning('学号与姓名不能为空')
    return
  }
  if (students.value.some(s => s.username === form.value.username.trim())) {
    ElMessage.error(`学号 ${form.value.username} 已存在`)
    return
  }
  const nextId = students.value.length ? Math.max(...students.value.map(s => s.id)) + 1 : 1
  students.value.push({
    id: nextId,
    username: form.value.username.trim(),
    name: form.value.name.trim(),
    major: form.value.major,
    status: form.value.status
  })
  ElMessage.success(`学员 ${form.value.name} 录入成功`)
  dialogVisible.value = false
}

const removeStudent = (row) => {
  ElMessageBox.confirm(`确定移除【${row.name}（${row.username}）】吗？`, '删除确认', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    students.value = students.value.filter(s => s.id !== row.id)
    ElMessage.success('已移除该学员')
  }).catch(() => {})
}
</script>

<template>
  <div class="page">
    <div class="toolbar">
      <h2 class="page-title">🎓 {{ title }}</h2>
      <el-button type="primary" @click="openDialog">+ 新增学员</el-button>
    </div>

    <div class="filter-bar">
      <el-input v-model="keyword" placeholder="输入学号或姓名搜索" clearable style="width: 260px" />
      <el-tag type="info" size="large">共 {{ filteredStudents.length }} 人</el-tag>
    </div>

    <el-table :data="filteredStudents" border stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="70" align="center" />
      <el-table-column prop="username" label="学号" width="140" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="major" label="专业" />
      <el-table-column label="状态" width="110" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === '在读' ? 'success' : 'warning'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button type="danger" size="small" link @click="removeStudent(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="录入新学员" width="450px">
      <el-form label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="form.username" placeholder="如 2510101" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="学员姓名" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="form.major" placeholder="如 软件工程" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" style="width: 100%">
            <el-option label="在读" value="在读" />
            <el-option label="请假" value="请假" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style>
/* 覆盖 create-vue 脚手架默认样式，保证本文件单独粘贴后即可正常铺满页面 */
html, body, #app {
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;
  display: block;
  text-align: left;
  background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1000px; margin: 24px auto; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.page-title { margin: 0; font-size: 20px; color: #303133; }
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
</style>

node -v
npm -v

npm create vue@3.12.0

cd lesson-vue-01
npm install
npm run dev

npm install element-plus

npm run dev

const statusType = (status) => {
  if (status === '在读') return 'success'   // 绿
  if (status === '请假') return 'warning'   // 黄
  return 'danger'                            // 红，兜底
}

<el-tag :type="statusType(scope.row.status)">{{ scope.row.status }}</el-tag>

<el-option label="预警" value="预警" />