element表单常用组件的回显总结

Checkbox 多选框1、组件代码template el-checkbox-group v-modelcheckList el-checkbox labelOption A valueValue A / el-checkbox labelOption B valueValue B / el-checkbox labelOption C valueValue C / el-checkbox labeldisabled valueValue disabled disabled / el-checkbox labelselected and disabled valueValue selected and disabled disabled / /el-checkbox-group /template举例显示2、值回显Checkbox多选框以数组形式赋值给model回显数组每一项的值为el-checkbox需要回显的value值。script langts setup import { ref } from vue const checkList ref([Value selected and disabled, Value A]) /scriptRadio 单选框1、组件代码el-radio-group v-modelparamsAdd.receivingType changechange stylewidth: 400px el-radio value1 住户/el-radio el-radio value2 内部/el-radio /el-radio-group举例显示2、值回显绑定的receivingType值赋值需要回显的el-radio对应的value值即可。paramsAdd.value.receivingType 1Select 选择器1、组件代码el-select placeholder公告类型 v-modelsearchUnit.type clearable el-option v-foritem in dicList.noticeType :keyitem.value :labelitem.label :valueitem.value/el-option /el-select举例显示2、值回显绑定的searchUnit.type赋值需要回显的el-option对应的value值即可。DateTimePicker 日期时间选择器1、组件代码el-date-picker v-modeldayList typedatetimerange range-separator— formatYYYY-MM-DD value-formatYYYY-MM-DD :start-placeholderlanguageServe.startTime :end-placeholderlanguageServe.endTime stylewidth: 280px/举例显示2、值回显因为有起始和结束时间所以绑定值dayList是一个数组回显只需在数组对象中赋值标准格式时间即可。dayList.value[0] 2026-06-17 dayList.value[1] 2026-06-23如果只需绑定单个时间。为绑定值赋值字符串标准格式时间即可。dayList.value 2026-06-17Cascader 级联选择器1、组件代码el-cascader v-modelelcValue :optionsoptions changehandleChange /举例显示2、值回显回显需保证options有值的情况下以数组形式一层层对应。以上图显示为例则elcValue [5711228]数组项依次为options中从父级到子级每一层的value值。options的结构示例(与上图的options不是同一个)若需定位到整个父级组例如1区 / 3栋 / 1单元则elcValue [5711]3、补充若使Cascader组件能够选择整个父级组需添加props属性。设置props.checkStrictly true来设置父子节点取消选中关联从而达到选择任意一级选项的目的。template el-cascader :optionsoptions :propsprops1 clearable / /template script langts setup const props1 { checkStrictly: true, } //其他代码省略 //.... //.... /script通过lazy开启动态加载并通过lazyload来设置加载数据源的方法。但动态加载在页面初次加载时很难实现值的回显。Upload 上传1、upload的上传方式法一使用action请求 URLel-upload classupload-demo :action/api/ylzk//file/uploadFilePath :auto-uploadtrue :on-successhandleUploadSuccess :headers{ token: token } :data{ commCode: 123456 } :on-errorhandleUploadError :limit3 :file-listfileList list-typepicture-card acceptimage/* :on-exceedhandleExceed :before-uploadbeforeUpload /el-uploadactionurl这是el-upload的默认上传地址。当没有自定义http-request时组件会把文件自动上传到action指定的 URL。方法通常是POST自动把文件file放到FormData中。还会自动带上:data...中的字段data是附带的额外表单字段上传时可以一同发送给后端。也会自动带上:headers...是上传请求头例如带上Authorizationtoken。法二使用http-request请求 URLel-upload action# :auto-uploadtrue list-typepicture-card :limit1 :file-listuploadFileList accept.jpg,.jpeg,.png :before-uploadbeforeUpload :on-successhandleUploadSuccess :http-requestcustomHttpRequest :on-errorhandleError /el-upload script setup langts //...... // http-request自定义上传请求函数 const customHttpRequest (options: any) { const { file, onSuccess, onError } options; const formData new FormData(); formData.append(file, file); const commCode localStorage.getItem(commCode) || ; formData.append(commCode, commCode); uploadFile(formData).then((res: any) { console.log(res); // 调用 onSuccess 回调函数触发 handleSuccess onSuccess(res.data, file); }).catch((error) { // 调用 onError 回调函数触发 handleError onError(error); }); }; /script使用http-requestcustomHttpRequest自定义上传请求逻辑替代默认的浏览器上传。这里用它把文件和 token 发送给uploadFile接口。