<el-select v-model="dirs" multiple filterable collapse-tags placeholder="可多选" style="width: 100%">
  <el-option-group label="前端方向">
    <el-option label="Vue" value="vue" />
    <el-option label="React" value="react" />
  </el-option-group>
  <el-option-group label="后端方向">
    <el-option label="Java" value="java" />
    <el-option label="Go" value="go" />
  </el-option-group>
</el-select>

const form = reactive({
  name: '',        // 字符串 → el-input
  age: 18,         // 数字  → el-input-number
  tags: [],        // 数组  → el-checkbox-group / el-select multiple
  enabled: true    // 布尔  → el-switch
})

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  ElConfigProvider, ElCard, ElRow, ElCol, ElForm, ElFormItem, ElInput,
  ElInputNumber, ElSelect, ElOption, ElOptionGroup, ElRadioGroup, ElRadio,
  ElCheckboxGroup, ElCheckbox, ElSwitch, ElSlider, ElRate, ElButton,
  ElDivider, ElDescriptions, ElDescriptionsItem, ElAlert, ElSpace, ElTag,
  ElMessage
} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'

const form = reactive({
  name: '张三',            // 字符串 → el-input
  sno: '2026001',          // 字符串 → el-input
  age: 18,                 // 数字   → el-input-number
  gender: '男',            // 单选   → el-radio-group
  cls: '',                 // 单选   → el-select
  directions: [],          // 多选   → el-select multiple
  skills: ['vue'],         // 多选   → el-checkbox-group
  enabled: true,           // 布尔   → el-switch
  progress: 60,            // 数字   → el-slider
  rating: 4,               // 数字   → el-rate
  password: '',            // 字符串 → el-input show-password
  remark: ''               // 长文本 → textarea
})

const skillOptions = ['vue', 'react', 'java', 'python', 'sql']
const dirOptions = [
  { label: '前端方向', items: [{ label: 'Vue 开发', value: 'vue' }, { label: 'React 开发', value: 'react' }] },
  { label: '后端方向', items: [{ label: 'Java 后端', value: 'java' }, { label: 'Go 后端', value: 'go' }] },
  { label: '数据方向', items: [{ label: '数据分析', value: 'data' }, { label: '数据库运维', value: 'dba' }] }
]

// 实时快照：检验每个控件到底写了什么类型进去
const snapshot = computed(() => ({
  name: form.name,
  类型_name: typeof form.name,
  age: form.age,
  类型_age: typeof form.age,
  directions: form.directions,
  类型_directions: Array.isArray(form.directions) ? 'array' : typeof form.directions,
  skills: form.skills,
  enabled: form.enabled,
  类型_enabled: typeof form.enabled,
  progress: form.progress,
  rating: form.rating
}))

const remarkLen = computed(() => form.remark.length)

function submit() {
  ElMessage.success('已收集：「' + form.name + '」，方向 ' + form.directions.length + ' 个')
  console.log('提交快照：', JSON.parse(JSON.stringify(form)))
}

function reset() {
  Object.assign(form, {
    name: '', sno: '', age: 18, gender: '男', cls: '', directions: [],
    skills: [], enabled: true, progress: 50, rating: 0, password: '', remark: ''
  })
  ElMessage.info('已重置')
}
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="page">
      <h1 class="title">学员信息录入</h1>

      <el-row :gutter="16">
        <el-col :xs="24" :md="14">
          <el-card>
            <template #header>八种控件（每个都改一下试试）</template>

            <el-form label-width="96px" @submit.prevent>
              <el-divider content-position="left">文本类</el-divider>

              <el-form-item label="姓名">
                <el-input v-model.trim="form.name" placeholder="请输入姓名" clearable />
              </el-form-item>

              <el-form-item label="学号">
                <el-input v-model.trim="form.sno" placeholder="只读示例：可以选中复制" readonly />
              </el-form-item>

              <el-form-item label="密码">
                <el-input v-model="form.password" type="password" show-password placeholder="试试右侧的小眼睛" />
              </el-form-item>

              <el-form-item label="年龄">
                <el-input-number v-model="form.age" :min="10" :max="60" @change="v => ElMessage.info('年龄变成数字：' + v + '（' + typeof v + '）')" />
              </el-form-item>

              <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="100" show-word-limit placeholder="最多 100 字" />
              </el-form-item>

              <el-divider content-position="left">选择类</el-divider>

              <el-form-item label="性别">
                <!-- 选项少于 5 个：用单选按钮，一眼看全 -->
                <el-radio-group v-model="form.gender">
                  <el-radio value="男">男</el-radio>
                  <el-radio value="女">女</el-radio>
                  <el-radio value="保密">保密</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="班级">
                <!-- 单选 + 可搜索 -->
                <el-select v-model="form.cls" filterable clearable placeholder="可输入关键字过滤" style="width: 100%">
                  <el-option v-for="i in 6" :key="i" :label="'计算机' + i + '班'" :value="'计算机' + i + '班'" />
                </el-select>
              </el-form-item>

              <el-form-item label="报名方向">
                <!-- 多选 + 分组 + 标签折叠：值一定是数组 -->
                <el-select v-model="form.directions" multiple filterable collapse-tags placeholder="可多选" style="width: 100%">
                  <el-option-group v-for="g in dirOptions" :key="g.label" :label="g.label">
                    <el-option v-for="it in g.items" :key="it.value" :label="it.label" :value="it.value" />
                  </el-option-group>
                </el-select>
              </el-form-item>

              <el-form-item label="已掌握技能">
                <!-- 多选框组：值必须是数组 -->
                <el-checkbox-group v-model="form.skills">
                  <el-checkbox v-for="s in skillOptions" :key="s" :value="s">{{ s }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="是否启用">
                <el-switch v-model="form.enabled" active-text="启用" inactive-text="停用" />
              </el-form-item>

              <el-form-item label="学习进度">
                <el-slider v-model="form.progress" show-input style="width: 100%" />
              </el-form-item>

              <el-form-item label="课程评分">
                <el-rate v-model="form.rating" show-score allow-half />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <el-col :xs="24" :md="10">
          <el-card class="mb">
            <template #header>实时类型快照（这是本课的关键）</template>
            <pre class="json">{{ JSON.stringify(snapshot, null, 2) }}</pre>
            <el-alert
              title="重点看：name / age / directions / skills / enabled 分别是什么类型。控件不同，写进数据的类型就不同。"
              type="info" :closable="false" show-icon
            />
          </el-card>

          <el-card>
            <template #header>字段速览</template>
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="姓名">{{ form.name || '—' }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ form.age }}（{{ typeof form.age }}）</el-descriptions-item>
              <el-descriptions-item label="班级">{{ form.cls || '未选' }}</el-descriptions-item>
              <el-descriptions-item label="报名方向">
                <el-tag v-for="d in form.directions" :key="d" size="small" style="margin-right: 4px">{{ d }}</el-tag>
                <span v-if="!form.directions.length">未选</span>
              </el-descriptions-item>
              <el-descriptions-item label="技能">{{ form.skills.join('、') || '未选' }}</el-descriptions-item>
              <el-descriptions-item label="启用">{{ form.enabled ? '是' : '否' }}</el-descriptions-item>
              <el-descriptions-item label="备注字数">{{ remarkLen }} / 100</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-config-provider>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1150px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.mb { margin-bottom: 16px; }
.json {
  background: #1f2430; color: #a9dc76; padding: 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.7; margin: 0 0 12px; max-height: 420px; overflow: auto;
}
</style>

<el-input v-model.trim="form.sno" readonly />

<el-input v-model="name" placeholder="请输入姓名" clearable />

<el-input v-model="remark" type="textarea" :rows="3" maxlength="100" show-word-limit />

<el-input-number v-model="age" :min="10" :max="60" @change="v => console.log(typeof v)" />

<el-slider v-model="progress" show-input />
<el-rate v-model="rating" show-score allow-half />