vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)

最新推荐文章于 2024-08-01 14:08:25 发布

撑戌圆爱痒生

最新推荐文章于 2024-08-01 14:08:25 发布

阅读量1.3k

点赞数 4

分类专栏： vue3.0 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/moqi_77/article/details/118960134

版权

本文详细记录了在Vue 3.0项目中使用Element UI进行表单设计的经验，包括Input输入框、文本域、日期选择、时间选择、单选、Select下拉、上传功能（图片和视频）以及表单验证和数据绑定。通过实例展示了中国标准时间和日期格式间的转换，以及时间格式的转换方法，为前端开发者提供了一站式的Element UI表单组件使用指南。

摘要由CSDN通过智能技术生成

Element UI 表单使用记录

element ui 表单

element ui 表单

这次做了一个后台管理系统,用到了Element UI组件
做个记录ing~
话不多说上干货o(0V0)o~

input

<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
	//表格前选项方格			
    <el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
</el-table>

文本域

					<el-input type="textarea" v-model="form.Package_identification"></el-input>
				</el-form-item>

日期选择

<div class="block1">
	<span class="demonstration">活动时间</span>
	<el-date-picker unlink-panels v-model="value1" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
	</el-date-picker>
</div>

两个选择日期的

中国标准时间与xxxx-xx-xx格式时间之间的来回切换

中国标准时间转换为xxxx-xx-xx格式

//value1是日期选择表单绑定的值(我的日期选择是两个日期,以前以后联动的)
//此条为中国标准时间转换为xxxx-xx-xx格式
var begin = value1.value[0];
						var end = value1.value[1];
						begin = begin.toLocaleString();
						end = end.toLocaleString();
						begin = begin.split('/');
						end = end.split('/');
						if (begin[1] < 10) {
   
							if (begin[2].split('上')[0] < 10) {
   
								begin = begin[0] + '-' + '0' + begin[1] + '-' + '0' + begin[2].split('上')[0];
							} else {
   
								begin = begin[0] + '-' + '0' + begin[1] + '-' + begin[2].split('上')[0];
							}
						} else {
   
							if (begin[2].split('上')[0] < 10) {
   
								begin = begin[0] + '-' + begin[1] + '-' + '0' + begin[2].split('上')[0];