form表单

form表单的学习

// ▇ 日期选择器 注意日期格式
<el-date-picker
  v-model="ruleForm.birth"
  type="date"
  placeholder="选择生日"
  format="yyyy 年 MM 月 dd 日"
  value-format="yyyy-MM-dd"> //日期格式 2010-10-10
</el-date-picker>

// ▇ 图片上传选择器 注意上传之前做判断，请求的地址是否正确，最后 拼接 拿到图片地址
<el-upload
  class="avatar-uploader"
  :action="uploadAction" //action请求地址
  :on-success="handleAvatarSuccess" 
  :before-upload="beforeAvatarUpload"
>
  	<img v-if="imageUrl" :src="imageUrl" class="avatar" /> 
  	<i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed #d9d9d9">	</i>
</el-upload>

//请求地址
uploadAction: `${process.env.VUE_APP_DEVELOPMENT_SERVER_URL}/upload/uploadPicture`,
    
//请求成功之后拿到地址
handleAvatarSuccess(res) {
      this.imageUrl = `${process.env.VUE_APP_DEVELOPMENT_SERVER_URL}/public${res.data.url}`
},
    
//上传之前做判断    
beforeAvatarUpload(file) {
  const isType =
    file.type === 'image/jpeg' ||
    file.type === 'image/jpg' ||
    file.type === 'image/png' ||
    file.type === 'image/bmp'
  const isLt2M = file.size / 1024 / 1024 < 2.5
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2.5MB!')
  }
  if (!isType) {
    this.$message.error('上传图片格式错误!')
  }
  if (file.name.length >= 100) {
    this.$message.error('图片名字超长，请换一张图片!')
  }
  return isType && isLt2M
},
 
// ▇ select选择器 (字典) 注意问清楚 ▇接口字典的使用，后台需要的是什么就传什么！
 <el-form-item label="性别" prop="sex">
  <el-select v-model="ruleForm.sex" placeholder="请选择性别">
    <el-option
      :value="item.dictValue"
      :label="item.dictLabel"
      v-for="(item, index) in sexList"
      :key="index">
    </el-option>
  </el-select>
</el-form-item>

// ▇ select选择器 (省市区) 注意需要监听变化
<el-form-item size="small" label="所属地区：" class="area" prop="province" placeholder="请选择城市">
  <el-select placeholder="省份" v-model="form.province">
    <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name" 		:value="item.id">
        {{item.name}}
    </el-option>
  </el-select>
  <el-select placeholder="市区" v-model="form.city">
    <el-option v-for="(item, index) in cityList" :key="index" :label="item.name" 			:value="item.id">
        {{item.name}}
     </el-option>
  </el-select>
  <el-select placeholder="街道" v-model="form.county">
    <el-option v-for="(item, index) in countyList" :key="index" :label="item.name" 			:value="item.id">
        {{item.name}}
    </el-option>
  </el-select>
</el-form-item>
data(){
    return{
       	provinceList: [],
      	cityList: [],
      	countyList: [],
        form：{
        	province："",
        	city:'',
        	county:''
    	}
    }
}
created() {
    //初始化请求省
    findProvinceApi().then((res) => {
      this.provinceList = res.data
    })
},
watch: {
    //▇监听省的变化 ，▇清空城市、区 
  'form.province': function () {
    this.form.city = '' 	//注意清空后城市
    this.countyList = []	//注意清空后县区
    findCityApi({ id: this.form.province }).then((res) => {
      this.cityList = res.data
    })
},
   //▇监听市的变化 ，▇清空区 
  'form.city': function () {
    this.form.county = '' //注意清空县区
    findCityApi({ id: this.form.city }).then((res) => {
      this.countyList = res.data
    })
  },
  deep: true,
},