1
<template>
2
  <el-form :model="formData" label-width="100px" size="large">
3
    <!-- 表单项 -->
4
  </el-form>
5
</template>
6

7
<script setup>
8
import { reactive } from 'vue'
9

10
// 表单数据模型
11
const formData = reactive({
12
  // 表单字段
13
})
14
</script>

1
<el-form-item label="用户名：" required>
2
  <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
3
</el-form-item>

1
<el-form-item label="性别：" required>
2
  <el-select v-model="formData.gender" placeholder="请选择">
3
    <el-option label="男" value="male"></el-option>
4
    <el-option label="女" value="female"></el-option>
5
  </el-select>
6
</el-form-item>

1
<el-form-item label="状态：">
2
  <el-radio-group v-model="formData.status">
3
    <el-radio label="active">启用</el-radio>
4
    <el-radio label="inactive">停用</el-radio>
5
  </el-radio-group>
6
</el-form-item>

1
<el-form-item label="角色：">
2
  <el-checkbox-group v-model="formData.roles">
3
    <el-checkbox label="admin">管理员</el-checkbox>
4
    <el-checkbox label="user">普通用户</el-checkbox>
5
  </el-checkbox-group>
6
</el-form-item>

1
<!-- 日期选择 -->
2
<el-form-item label="出生日期：">
3
  <el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期"></el-date-picker>
4
</el-form-item>
5

6
<!-- 时间范围 -->
7
<el-form-item label="开放时间：">
8
  <el-time-picker v-model="formData.startTime" format="HH:mm" placeholder="开始时间"></el-time-picker>
9
  <span>~</span>
10
  <el-time-picker v-model="formData.endTime" format="HH:mm" placeholder="结束时间"></el-time-picker>
11
</el-form-item>

1
<el-form-item label="简介：">
2
  <el-input
3
    v-model="formData.intro"
4
    type="textarea"
5
    placeholder="请输入简介"
6
    rows="3"
7
  ></el-input>
8
</el-form-item>

1
<el-form-item label="头像：">
2
  <el-upload
3
    class="avatar-uploader"
4
    :show-file-list="false"
5
    action="#"
6
    :before-upload="() => false"
7
  >
8
    <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
9
    <div v-else class="el-upload__text">+ 上传</div>
10
  </el-upload>
11
</el-form-item>

1
<el-input v-model="formData.fieldName" placeholder="请输入"></el-input>

1
<el-row :gutter="16">
2
  <el-col :sm="12" :xs="24">
3
    <!-- 表单项 -->
4
  </el-col>
5
  <el-col :sm="12" :xs="24">
6
    <!-- 表单项 -->
7
  </el-col>
8
</el-row>

1
<h3 style="margin: 20px 0 15px;">基本信息</h3>
2
<!-- 相关表单项 -->
3

4
<h3 style="margin: 20px 0 15px;">高级设置</h3>
5
<!-- 相关表单项 -->

1
<el-form :model="formData" :rules="formRules" label-width="100px">
2
  <!-- 表单项 -->
3
</el-form>
4

5
<script setup>
6
import { reactive } from 'vue'
7

8
const formData = reactive({ /* 表单数据 */ })
9

10
// 验证规则
11
const formRules = reactive({
12
  username: [
13
    { required: true, message: '请输入用户名', trigger: 'blur' },
14
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
15
  ]
16
})
17
</script>

1
<el-form ref="formRef" :model="formData" :rules="formRules">
2
  <!-- 表单项 -->
3
  <el-button type="primary" @click="submitForm">提交</el-button>
4
</el-form>
5

6
<script setup>
7
import { reactive, ref } from 'vue'
8

9
const formRef = ref(null)
10
const formData = reactive({ /* 表单数据 */ })
11
const formRules = reactive({ /* 验证规则 */ })
12

13
// 提交表单
14
const submitForm = () => {
15
  formRef.value.validate((valid) => {
16
    if (valid) {
17
      // 验证通过，处理表单提交
18
    }
19
  })
20
}
21
</script>

1
// 推荐使用 reactive 创建表单数据
2
const formData = reactive({
3
  basic: {
4
    // 基本信息字段
5
  },
6
  advanced: {
7
    // 高级设置字段
8
  }
9
})

1
<template>
2
  <!-- 表单结构 -->
3
</template>
4

5
<script setup>
6
// 1. 导入依赖
7
// 2. 定义表单数据
8
// 3. 定义验证规则
9
// 4. 定义表单方法
10
// 5. 定义生命周期钩子
11
</script>
12

13
<style scoped>
14
/* 表单样式 */
15
</style>

1
<!-- 错误 -->
2
<el-select v-model="formData.tags" multiple collapse-tags>
3
  <!-- 选项 -->
4
</el-select>
5

6
<!-- 正确 -->
7
<el-select v-model="formData.tags" multiple>
8
  <!-- 选项 -->
9
</el-select>

1
// 正确做法
2
const formData = reactive({
3
  // 表单字段
4
})

1
// 选项 value 是字符串类型
2
<el-option label="选项1" value="1"></el-option>
3

4
// 绑定值也应该是字符串类型
5
const formData = reactive({
6
  option: '1' // 而不是数字 1
7
})