目录
前言
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-option
v-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-upload
action="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-cardon-preview
:点击文件列表中已上传的文件时的钩子on-remove
:文件列表移除文件时的钩子
7. 文件上传 (File Upload)
通过 el-upload
组件实现
<template>
<el-form :model="formData" ref="form">
<el-form-item label="上传文件" prop="file">
<el-upload
action="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>
截图如下: