详细讲解Element UI 中丰富的表单控件（图文解析）

前言

Element UI 一个基于 Vue.js 2.0 的桌面端组件库，提供许多常用的 UI 组件

该博客主要讲解如何使用 Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件

1. 文本框、文本域

文本框比较简易，也是用得比较多的一个控件
就是没有type： <el-input v-model="formData.description" placeholder="请输入描述" />

如果是文本域，则如下：

示例代码如下

<template><el-form :model="formData" ref="form"><el-form-item label="描述" prop="description"><el-input type="textarea" v-model="formData.description" placeholder="请输入描述" /></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {description: ''}};}
};
</script>

主要的属性如下：

• v-model：绑定输入值
• type：设置为 textarea 以启用多行输入

如图所示：

2. 下拉框 (Select)

用于从预定义的选项中选择一个值

通过 el-select 和 el-option 组件实现

<template><el-form :model="formData" ref="form"><el-form-item label="箱型" prop="boxType"><el-select v-model="formData.boxType" placeholder="请选择箱型"><el-option label="类型1" value="type1"></el-option><el-option label="类型2" value="type2"></el-option></el-select></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {boxType: ''}};}
};
</script>

主要属性和方法

• v-model：绑定选中的值
• placeholder：输入框为空时的占位文本
• el-option 的 label 和 value：分别表示选项的显示文本和实际值

实战中的代码示例如下：

<el-form-item label="预约类型" prop="appointmentType"><el-select v-model="formData.appointmentType" :disabled="formType === 'detail'" placeholder="请选择预约类型"><el-optionv-for="dict in getStrDictOptions(DICT_TYPE.DANGEROUS_APPOINTMENT_TYPE)":key="dict.value":label="dict.label":value="dict.value"/></el-select>
</el-form-item>

可以通过字典的形式进行存储

3. 单选框 (Radio)

用于从一组选项中选择一个值

通过 el-radio 和 el-radio-group 组件实现

<template><el-form :model="formData" ref="form"><el-form-item label="性别" prop="gender"><el-radio-group v-model="formData.gender"><el-radio label="male">男</el-radio><el-radio label="female">女</el-radio></el-radio-group></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {gender: ''}};}
};
</script>

主要属性和方法：

• v-model：绑定选中的值
• el-radio 的 label：单选框的值

4. 复选框 (Checkbox)

用于从一组选项中选择多个值

通过 el-checkbox 和 el-checkbox-group 组件实现

<template><el-form :model="formData" ref="form"><el-form-item label="职位" prop="hobbies"><el-checkbox-group v-model="formData.hobbies"><el-checkbox label="reading">吗喽1</el-checkbox><el-checkbox label="sports">吗喽2</el-checkbox><el-checkbox label="music">吗喽3</el-checkbox></el-checkbox-group></el-item></el-form>
</template><script>
export default {data() {return {formData: {hobbies: []}};}
};
</script>

主要属性和方法：

• v-model：绑定选中的值
• el-checkbox 的 label：复选框的值

5. 日期控件 (Date Picker)

用于选择日期或日期范围

通过 el-date-picker 组件实现

<template><el-form :model="formData" ref="form"><el-form-item label="日期" prop="date"><el-date-picker v-model="formData.date" type="date" placeholder="请选择日期"></el-date-picker></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {date: ''}};}
};
</script>

主要属性和方法：

• v-model：绑定选中的日期
• type：设置日期选择器类型，如 date、daterange、datetime 等
• placeholder：输入框为空时的占位文本

对于这个日期原先写过一个组件，推荐阅读：【ElementUI】详细分析DatePicker 日期选择器

截图如下：

6. 图片上传 (Image Upload)

<template><el-form :model="formData" ref="form"><el-form-item label="上传图片" prop="image"><el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-preview="handlePreview":on-remove="handleRemove"v-model="formData.image"><i class="el-icon-plus"></i></el-upload></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {image: []}};},methods: {handlePreview(file) {console.log(file);},handleRemove(file, fileList) {console.log(file, fileList);}}
};
</script>

主要属性和方法：

• action：上传的地址
• list-type：文件列表的类型，可选值为 text、picture 和 picture-card
• on-preview：点击文件列表中已上传的文件时的钩子
• on-remove：文件列表移除文件时的钩子

7. 文件上传 (File Upload)

通过 el-upload 组件实现

<template><el-form :model="formData" ref="form"><el-form-item label="上传文件" prop="file"><el-uploadaction="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove"v-model="formData.file"><el-button type="primary">点击上传</el-button></el-upload></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {file: []}};},methods: {handlePreview(file) {console.log(file);},handleRemove(file, fileList) {console.log(file, fileList);}}
};
</script>

主要属性和方法

• action：上传的地址
• on-preview：点击文件列表中已上传的文件时的钩子
• on-remove：文件列表移除文件时的钩子

8. 富文本控件 (Rich Text Editor)

用于编辑和格式化文本内容

通过第三方库如 vue-quill-editor 实现：npm install vue-quill-editor

<template><el-form :model="formData" ref="form"><el-form-item label="内容" prop="content"><quill-editor v-model="formData.content" ref="quillEditor"></quill-editor></el-form-item></el-form>
</template><script>
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';export default {components: {quillEditor},data() {return {formData: {content: ''}};}
};
</script>

主要属性和方法：

• v-model：绑定编辑器内容
• quillEditor：富文本编辑器组件

这个控件比较丰富，我使用的是Editor

<el-form-item label="货物描述" prop="descriptionGoods"><Editor v-model="formData.descriptionGoods" height="150px" />
</el-form-item>

截图如下：