目录
- 前言
- 1. 文本框、文本域
- 2. 下拉框 (Select)
- 3. 单选框 (Radio)
- 4. 复选框 (Checkbox)
- 5. 日期控件 (Date Picker)
- 6. 图片上传 (Image Upload)
- 7. 文件上传 (File Upload)
- 8. 富文本控件 (Rich Text Editor)
前言
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>
截图如下：
![[面试题]RabbitMQ](https://img-blog.csdnimg.cn/direct/6507af77273149edbd66e3abcb940ebf.jpeg#pic_left)
