Element 常用组件

最新推荐文章于 2024-08-29 22:14:46 发布

梦さん

最新推荐文章于 2024-08-29 22:14:46 发布

阅读量798

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45041558/article/details/126045877

版权

这篇博客详细介绍了前端开发中常用的时间选择器、文件上传、单选下拉框和单选框的Vue组件使用方法，以及Vue的表单验证实现。内容包括限制日期范围、图片上传限制、下拉框数据绑定、Radio选项展示和分页功能的配置。同时，重点阐述了Vue的表单校验规则，如价格字段的必填和格式验证，并展示了如何进行校验信息的清除和表单重置。

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

时间选择器

<el-date-picker 
  type="date" 
  placeholder="上牌时间" 
  :picker-options="pickerOptions"          //限制时间范围
  v-model="carForm.licenseDate" 
  value-format="yyyy-MM-dd" 	//限制时间格式
>
</el-date-picker>
//----
disabledDate(selectDate){
      //禁用今天之后的
      return selectDate > new Date().getTime() - 24*60*60*1000
}

文件上传 el-upload

<el-upload
        class="upload-demo"
        :action="base_url+'/img/upload'"  //图片上传请求路径
        :on-success="handleSuccess"	//图片上传成功返回
        :file-list="fileList"		//图片列表 [{name:xxx,url:xxx},{...}]
        :before-upload="beforeUpload"	//图片上传前  file(校验格式,大小)
         name="file"			//注:后端字段与之对应
         :limit="1"			//最大上传数
         :on-exceed="onExceed"		//如果超过最大上传数
         :on-remove="onRemove"	//删除图片
         list-type="picture">		//upload类型
</el-upload>

单选下拉框

<el-select clearable v-model="carForm.level" placeholder="级别">
    <el-option
     v-for="(item, index) in dict.levelList" //数组
    :key="index"
    :label="item.name"  //显示的内容
    :value="item.value"  //选中传入绑定data的内容
    ></el-option>
</el-select>

单选框 redio

<el-radio v-for="(item, index) in dict.gearboxList" 
   :key="index" 
   :label="item.value"  //注:radio没有:value :label是显示的值也是绑定data的值
  >
    {{item.name}}	//显示和绑定内容不同用这个方法显示
</el-radio>

分页

<el-pagination background 
      layout="total,sizes,prev,pager,next,jumper" 	//组件
      :page-sizes=[5,10,15,20,50,100]		//分页每页条数切换	
      :current-page="pageNum"		//当前页
      :page-size="pageSize"			//每页条数
      :total="total"				//总数据数	
      @current-change="pageNumChange"	//监听当前页切换
      @Size-change="pageSizeChange">		//监听每页条数切换
</el-pagination>

Vue校验的实现主要过程

+ <el-form ref="carFormRef" :rules="carFormRules">
+ <el-form-item prop = "name">
+ @click="addCar('carformRef')"
+ carFormRules:{  //校验规则
      price:[
          {required:true,message:'必填',trigger:'blur'},
          //正则表达式 3位整数2位小数
          {pattern:/^(\d{1,3})(\.{0}|\.\d{1,2})$/,message:'仅支持两位小数'}
      ]
}
+ this.$refs.CarformRef.validate(valid=>{   if(valid){'校验成功'}   }

其他校验+清空表单

this.$refs['CarformRef'].clearValidate();	//清空验证信息提示
this.$refs['CarformRef'].resetFields();	//清空表单
this.$refs.CarformRef.validate(valid=>{	//表单校验
 //校验成功 if(valid){...}else{}
//给pic赋值之后重新校验pic字段
this.$refs.CarformRef.validateField('pic')