详细讲解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-itemlabel="描述"prop="description"><el-inputtype="textarea"v-model="formData.description"placeholder="请输入描述"/></el-form-item></el-form></template><script>exportdefault{data(){return{formData:{description:''}};}};</script>

主要的属性如下：

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

如图所示：

2. 下拉框 (Select)

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

通过

el-select

和

el-option

组件实现

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

主要属性和方法

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

实战中的代码示例如下：

<el-form-itemlabel="预约类型"prop="appointmentType"><el-selectv-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-itemlabel="性别"prop="gender"><el-radio-groupv-model="formData.gender"><el-radiolabel="male">男</el-radio><el-radiolabel="female">女</el-radio></el-radio-group></el-form-item></el-form></template><script>exportdefault{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-itemlabel="职位"prop="hobbies"><el-checkbox-groupv-model="formData.hobbies"><el-checkboxlabel="reading">吗喽1</el-checkbox><el-checkboxlabel="sports">吗喽2</el-checkbox><el-checkboxlabel="music">吗喽3</el-checkbox></el-checkbox-group></el-item></el-form></template><script>exportdefault{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-itemlabel="日期"prop="date"><el-date-pickerv-model="formData.date"type="date"placeholder="请选择日期"></el-date-picker></el-form-item></el-form></template><script>exportdefault{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-itemlabel="上传图片"prop="image"><el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-preview="handlePreview":on-remove="handleRemove"v-model="formData.image"><iclass="el-icon-plus"></i></el-upload></el-form-item></el-form></template><script>exportdefault{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-itemlabel="上传文件"prop="file"><el-uploadaction="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove"v-model="formData.file"><el-buttontype="primary">点击上传</el-button></el-upload></el-form-item></el-form></template><script>exportdefault{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-itemlabel="内容"prop="content"><quill-editorv-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';exportdefault{components:{
    quillEditor
  },data(){return{formData:{content:''}};}};</script>

主要属性和方法：

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

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

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

截图如下：