devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

elememt form表单二次封装，elform封装，很全很详细_el-form二次封装

作者：花生_TL007 | 2024-02-21 12:45:05

赞

踩

el-form二次封装

更新于：2021-07-29 15:30

功能：input，select，搜索select，textarea，各种年月日，时分秒，switch，单选，多选，文件上传，按钮，text查看只读，富文本编辑器，百度地图（可选）

详解：element的form表单二次封装也很简单，写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组（form-item里面组件类型数组），一个对象（form表单数据对象）控制就行了！为什么要多一个对象，是为了方便数据提交，以及数据验证。这次封装多加了el-col，也没有直接放进弹出框，是为了更加灵活可变！

1、form表单子组件代码（富文本编辑器，可根据项目需求，不引入也行）引入了自己单独二次封装一下

  1. <template>
  2. 	<el-form :model="formData" class="demo-ruleForm" ref="ruleForm" label-position="left" label-width="120px">
  3. 		<el-col v-for=" (formobj,index) in formObj" v-show="!formobj.notShow" :key="index" :span="formobj.width ? formobj.width : 24">
  4. 			<el-form-item :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules">
  5. 				<!-- inupt输入框 -->
  6. 				<el-input v-if="formobj.input" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" @input="inputINPUT($event,index,formobj.prop)" @change="inputChange($event,index,formobj.prop)" />
  7. 				<!-- textarea输入框 -->
  8. 				<el-input v-if="formobj.textarea" v-model="formData[formobj.prop]" size="small" type="textarea" :rows="formObj.rows" :disabled="formobj.disabled" :placeholder="formobj.placeholder" />
  9. 				<!-- select选择器 -->
  10. 				<el-select v-if="formobj.select" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" @change="selectChange($event,index,formobj.prop)">
  11. 					<el-option v-for="(options, sIndex) in formobj.options" :key="sIndex" :label="options.label" :value="options.value" />
  12. 				</el-select>
  13. 				<!-- select搜索框 -->
  14. 				<el-select v-if="formobj.searchSelect" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" filterable remote reserve-keyword :placeholder="formobj.placeholder" :remote-method="(query)=>remoteMethod(query,index,formobj.prop)" :loading="searchSelectLoading" @change="selectChange($event,index,formobj.prop)">
  15. 					<el-option v-for="(item,ssIndex) in formobj.options" :key="ssIndex" :label="item.label" :value="item.value" />
  16. 				</el-select>
  17. 				<!-- 年月日时分秒选择器 -->
  18. 				<el-date-picker v-if="formobj.dateTime" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" />
  19. 				<!-- 年月日时分秒，开始和结束时间 -->
  20. 				<el-date-picker v-if="formobj.dateTimeRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="small" type="datetimerange" :disabled="formobj.disabled" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
  21. 				<!-- 时分秒选择器 -->
  22. 				<el-time-picker v-if="formobj.timePicker" v-model="formData[formobj.prop]" value-format="HH:mm:ss" format="HH:mm:ss" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" :picker-options="formobj.options" />
  23. 				<!-- 时分秒选择器，开始和结束时间 -->
  24. 				<el-time-picker v-if="formobj.timePickerIsRange" v-model="formData[formobj.prop]" value-format="HH:mm:ss" format="HH:mm:ss" is-range size="small" :disabled="formobj.disabled" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" />
  25. 				<!-- 年月日选择器 -->
  26. 				<el-date-picker v-if="formobj.datePicker" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" />
  27. 				<!-- 年月日选择器，开始和介绍年月日 -->
  28. 				<el-date-picker v-if="formobj.datePickerIsRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" type="daterange" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
  29. 				<!-- switch开关 -->
  30. 				<el-switch v-if="formobj.switch" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" @change="formSwitchChange($event,index,formobj.prop)" />
  31. 				<!-- radio单选框 -->
  32. 				<el-radio-group v-if="formobj.radio" v-model="formData[formobj.prop]" :disabled="formobj.disabled">
  33. 					<el-radio v-for="(options, rIndex) in formobj.options" :key="rIndex" :label="options.label" :value="options.value" />
  34. 				</el-radio-group>
  35. 				<!-- checkbox复选框 -->
  36. 				<el-checkbox-group v-if="formobj.checkbox" v-model="formData[formobj.prop]" :disabled="formobj.disabled">
  37. 					<el-checkbox v-for="options in formobj.options" :key="options.value" :label="options.label" />
  38. 				</el-checkbox-group>
  39. 		
  40. 				<!-- 文件上传 -->
  41. 				<!-- 如果对象有值就回显，没有值就为空 -->
  42. 				<el-upload v-if="formobj.upload" :ref="formobj.prop"
  43. 					:accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
  44. 					:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
  45. 					:action="`${uploadUrl}${formobj.uploadObj.fileType ? formobj.uploadObj.fileType : '' }`"
  46. 					:limit="formobj.uploadObj.limit"
  47. 					:class="{'hide':formobj.uploadObj.hideUpload || formData[formobj.prop].length==formobj.uploadObj.limit}"
  48. 					:on-preview="handlePictureCardPreview"
  49. 					:on-remove="(file,fileList)=>handleRemove(file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
  50. 					:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
  51. 					list-type="picture-card" :auto-upload="true">
  52. 					<i slot="default" class="el-icon-plus" />
  53. 				</el-upload>
  54. 				<el-dialog v-if="formobj.upload" :visible.sync="dialogVisible" :append-to-body="true" width="40%">
  55. 					<img width="100%" :src="dialogImageUrl" alt="">
  56. 				</el-dialog>
  57. 		
  58. 				<!-- 按钮 -->
  59. 				<el-button v-if="formobj.button" size="small" :disabled="formobj.disabled" :loading="formobj.loading" :type="formobj.buttonType || 'primary'" @click="buttonClick(formobj.prop,index)">
  60. 					{{ formobj.placeholder }}
  61. 				</el-button>
  62. 				<!-- text展示 -->
  63. 				<span v-if="formobj.text" v-text="formData[formobj.prop]" />
  64. 				<!-- 计量单位 -->
  65. 				<span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span>
  66. 				
  67. 				<!-- 高德地图 -->
  68. 				<!-- <div class="amap_div" v-if="formobj.aMap">
  69. 					<el-input size="small" v-model="formData[formobj.prop]" @input="aMapInput($event,formobj.prop)"></el-input>
  70. 					<ul v-show="searchShow==formobj.prop" class="sreach_ul">
  71. 						<li @click="selectVal(sval,formobj.prop,index)" v-for=" (sval, index) in setSearchVal" :key="index">{{sval.name}}
  72. 							<span style="color:#8591A6 ;font-size: 12px;">{{sval.district}}</span>
  73. 						</li>
  74. 					</ul>
  75. 					<aMap :ref="'aMap'+formobj.prop" :aMapId="'aMapId'+formobj.prop" :location="formData[formobj.prop+'location']" @cbSearch="cbSearch($event,formobj.prop)"></aMap>
  76. 				</div> -->
  77. 				<quillEditor v-if="formobj.quillEditor" :quill="formData[formobj.prop]"></quillEditor>
  78. 				
  79. 			</el-form-item>
  80. 		</el-col>
  81. 	</el-form>
  82. </template>
  83. <!--  zoutiancong封装,date:20210429,详细使用见根目录@/views/home/testForm/testForm.vue,———————————————————————————————————————————————————————————————————————————————— -->
  84. <script>
  85. 	// import aMap from '../../map/aMap.vue'
  86. 	import quillEditor from '@/components/quillEditor/quillEditor.vue'
  87. 	export default {
  88. 		components:{
  89. 			quillEditor
  90. 		},
  91. 		props: {
  92. 			formObj: {
  93. 				type: Array,
  94. 				required: true
  95. 			},
  96. 			formData: {
  97. 				type: Object,
  98. 				required: true
  99. 			},
  100. 			searchSelectOptionsCb:{
  101. 				type:Array,
  102. 			}
  103. 		},
  104. 		data() {
  105. 			let uploadFileUrl = this.$store.state.user.uploadFileUrl;
  106. 			return {
  107. 				uploadUrl:uploadFileUrl,
  108. 				dialogImageUrl: '',
  109. 				searchSelectLoading:false,
  110. 				dialogVisible: false,
  111. 				disabled: false,
  112. 				searchShow: '', //高德地图input收索联想
  113. 				setSearchVal: [], //高德地图赋值搜索内容
  114. 			};
  115. 		},
  116. 		created() {
  117. 		},
  118. 		watch:{
  119. 		},
  120. 		methods: {
  121. 			//select变化调用
  122. 			selectChange(value, index, prop) {
  123. 				this.$emit('selectChange', value, index, prop);
  124. 			},
  125. 			// input的input事件
  126. 			inputINPUT(value, index, prop){
  127. 				this.$emit('inputINPUT', value, index, prop);
  128. 			},
  129. 			// input的change事件
  130. 			inputChange(value, index,prop){
  131. 				this.$emit('inputChange', value,index, prop);
  132. 			},
  133. 			// 搜索类型select搜索
  134. 			remoteMethod(query,index,prop) {
  135. 				if (query) {
  136. 					this.searchSelectLoading = true;
  137. 					this.$emit('querySelectValue',query,index,prop);
  138. 					setTimeout(() => {
  139. 						this.formObj[index].options = this.searchSelectOptionsCb;
  140. 						this.searchSelectLoading = false;
  141. 					}, 500)
  142. 				} else {
  143. 					this.searchSelectOptios  = [];
  144. 				}
  145. 			},
  146. 			//switch变化
  147. 			formSwitchChange(val,index,prop){
  148. 				this.$emit("formSwitchChange",val,index,prop);
  149. 			},
  150. 			//按钮点击事件
  151. 			buttonClick(prop,index){
  152. 				this.$emit("buttonClick",prop,index);
  153. 			},
  154. 			
  155. 			//文件上传成功回调
  156. 			uploadSuccess(response,file,fileList,limit,prop,index) {
  157. 				this.formObj[index].uploadObj.hideUpload=fileList.length==limit;//文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
  158. 				this.pushUpload(file,fileList,limit,prop);
  159. 			},
  160. 			//文件删除
  161. 			handleRemove(file,fileList,limit,prop,index) {
  162. 				this.formObj[index].uploadObj.hideUpload=fileList.length==limit;//文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
  163. 				this.pushUpload(file,fileList,limit,prop);
  164. 			},
  165. 			// 文件预览
  166. 			handlePictureCardPreview(file) {
  167. 				this.dialogImageUrl = file.url;
  168. 				this.dialogVisible = true;
  169. 			},
  170. 			
  171. 			//提交时验证表单，直接在父级调用
  172. 			submitForm() {
  173. 				let formValidate=Boolean;
  174. 				this.$refs.ruleForm.validate((valid) => {
  175. 					if (valid) {
  176. 						formValidate=true;
  177. 					} else {
  178. 						this.$message.warning("请把信息填写完整！");
  179. 						formValidate = false;
  180. 					}
  181. 				});
  182. 				return formValidate;
  183. 			},
  184. 			/* 清空表单
  185. 				逻辑：
  186. 				1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
  187. 				2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
  188. 			 */
  189. 			resetForm(uploadArr) {
  190. 				this.$refs.ruleForm.resetFields();
  191. 				if(uploadArr){
  192. 					for(let i=0;i<uploadArr.length;i++){
  193. 						this.$refs[uploadArr[i]][0].clearFiles();
  194. 						let index=this.formObj.findIndex(item=>item.prop==uploadArr[i]);
  195. 						this.formObj[index].uploadObj.hideUpload=false;
  196. 					}
  197. 				}
  198. 			},
  199. 			// 单个字段验证
  200. 			validateFieldProp(prop){
  201. 				let formValidate=Boolean;
  202. 				this.$refs.ruleForm.validateField(prop,valid => {
  203. 					if (!valid) {
  204. 						formValidate=true;
  205. 					} else {
  206. 						formValidate = false;
  207. 					}
  208. 				});
  209. 				return formValidate;
  210. 			},
  211. 			// 对文件上传，删除进行赋值，调用form验证
  212. 			pushUpload(file, fileList,limit,prop){
  213. 				if(fileList.length>0){
  214. 					this.formData[prop]=fileList;
  215. 				}else{
  216. 					// 表示没有数据,把字段置空
  217. 					this.formData[prop]="";
  218. 				}
  219. 				this.$refs.ruleForm.validateField(prop);//调用验证form表单的文件上传
  220. 			},
  221. 			//地图input的input事件
  222. 			aMapInput(value, prop) {
  223. 				this.$refs[`aMap${prop}`][0].getSearch(value);
  224. 			},
  225. 			//子组件返回地图搜索值
  226. 			cbSearch(val,prop) {
  227. 				this.setSearchVal = val.tips; //子组件
  228. 				this.searchShow = prop; //显示input输入联想
  229. 			},
  230. 			//选中地图值
  231. 			selectVal(val,prop,index) {
  232. 				// 赋值的时候，拿到键，及formobj的下标，进行赋值
  233. 				this.formData[prop] = val.name; //input输入框赋值
  234. 				this.formData.district = val.district; //传入省市区
  235. 				let lngLat = {
  236. 					lng: val.location.lng,
  237. 					lat: val.location.lat
  238. 				};
  239. 				this.formData[`${prop}location`] = lngLat;
  240. 				this.searchShow = ''; //隐藏input输入联想
  241. 			},
  242.  
  243. 		}
  244. 	}
  245. </script>
  246.  
  247. <style lang="less" scoped>
  248. 	@width: 220px;
  249. 	
  250. 	form {
  251. 		overflow: hidden;
  252. 	}
  253. 	
  254. 	/deep/.el-input {
  255. 		width: @width;
  256. 	}
  257.  
  258. 	/deep/.el-select {
  259. 		width: @width;
  260. 	}
  261.  
  262. 	/deep/.el-date-editor.el-input {
  263. 		width: @width;
  264. 	}
  265. 	/deep/.el-date-editor .el-range-separator{
  266. 		width: 20px !important;
  267. 	}
  268. 	/deep/.el-range-editor--small.el-input__inner{
  269. 		width: 400px;
  270. 	}
  271.  
  272. 	.el-textarea {
  273. 		width: 400px;
  274. 	}
  275.  
  276. 	.hide {
  277. 		/deep/ .el-upload--picture-card {
  278. 			display: none;
  279. 		}
  280. 	}
  281. 	.amap_div {
  282. 		overflow: hidden;
  283. 		height: 400px;
  284. 		width: 600px;
  285. 		position: relative;
  286. 	
  287. 		.sreach_ul {
  288. 			position: absolute;
  289. 			top: 1;
  290. 			background-color: white;
  291. 			z-index: 9;
  292. 			min-width: 210px;
  293. 			float: auto;
  294. 			height: 200px;
  295. 			overflow: auto;
  296. 			padding: 0 20px;
  297. 			line-height: 24px;
  298. 		}
  299. 	}
  300. </style>

2、父组件调用

  1. <template>
  2. 	<div>
  3. 		<el-button type="primary" @click="dialog = true" size="mini">点击打开 Dialog</el-button>
  4. 		<el-dialog title="提示" :visible.sync="dialog" width="1200px" :modal-append-to-body="false">
  5. 			<publicForm ref="publicForm" :formObj="formObj" :formData="formData"
  6. 				:searchSelectOptionsCb="searchSelectOptionsCb" @selectChange="selectChange" @inputINPUT="inputINPUT"
  7. 				@inputChange="inputChange" @querySelectValue="querySelectValue" @formSwitchChange="formSwitchChange"
  8. 				@buttonClick="buttonClick">
  9. 			</publicForm>
  10. 			<span slot="footer" class="dialog-footer">
  11. 				<el-button type="primary" @click="dialogOK">确认</el-button>
  12. 				<el-button @click="dialog=false">取 消</el-button>
  13. 			</span>
  14. 		</el-dialog>
  15. 	</div>
  16.  
  17. </template>
  18.  
  19. <script>
  20. 	import formJs from './js/testForm.js'
  21. 	export default {
  22. 		components: {},
  23. 		data() {
  24. 			return {
  25. 				dialog: false, //弹出框
  26. 				formObj: formJs.formObj,
  27. 				formData: formJs.formData,
  28. 				searchSelectOptionsCb: [], //form表单搜索select返回值
  29. 			};
  30. 		},
  31. 		watch: {
  32. 			dialog(newVal, oldVal) {
  33. 				if (!newVal) {
  34. 					this.$refs.publicForm.resetForm(); //窗口关闭清空表单
  35. 				}
  36. 			},
  37. 		},
  38. 		methods: {
  39. 			// select选择框变化
  40. 			selectChange(value, index, prop) {
  41. 				console.log(value, index, prop)
  42. 			},
  43. 			// inpuit变化
  44. 			inputINPUT(value, index, prop) {
  45. 				console.log(value, index, prop)
  46. 			},
  47. 			// inpuit Change
  48. 			inputChange(value, index, prop) {
  49. 				console.log(value, index, prop)
  50. 			},
  51. 			// select 搜索值
  52. 			querySelectValue(value, index, prop) {
  53. 				console.log(value, index, prop)
  54. 				let arr = [{
  55. 					label: '搜索返回1号',
  56. 					value: 1
  57. 				}, {
  58. 					label: '搜索返回2号',
  59. 					value: 2
  60. 				}];
  61. 				this.searchSelectOptionsCb = arr;
  62. 			},
  63. 			// form表单switch变化
  64. 			formSwitchChange(val, index, prop) {
  65. 				console.log(val, index, prop)
  66. 			},
  67. 			// 按钮点击
  68. 			buttonClick(index, prop) {
  69. 				console.log(index, prop)
  70. 			},
  71. 			dialogOK() {
  72. 				//判断表单验证是否通过
  73. 				if (this.$refs.publicForm.submitForm()) {
  74. 					console.log("success");
  75. 					console.log(this.formData)
  76. 				} else {
  77. 					console.log("error")
  78. 				}
  79. 			},
  80. 		}
  81. 	}
  82. </script>
  83.  
  84. <style lang="less" scoped>
  85.  
  86. </style>

3、父组件js（正则表达式js可以不用，或者自己封装）

  1. import regex from '../../../../utils/regex.js' // 正则表达式
  2. export default {
  3. 	formObj: [{
  4. 			input: true, //是input
  5. 			label: "input+正则", //字段
  6. 			prop: "input", //字段名
  7. 			placeholder: "请填写手机号", //提示内容
  8. 			width: 12, //参考el-col
  9. 			disabled: false, //是否禁用
  10. 			unit:'单位',
  11. 			rules: [{
  12. 				required: true,
  13. 				message: '联系方式'
  14. 			}, { //可以自己写utils，封装正则验证
  15. 				validator: (rule, value, callback) => {
  16. 					if (!value || !regex.isPhone(value)) {
  17. 						callback(new Error());
  18. 					} else {
  19. 						callback();
  20. 					}
  21. 				},
  22. 				message: "联系方式不对",
  23. 			}] //验证
  24. 		}, {
  25. 			textarea: true, //是input
  26. 			label: "输入框", //字段
  27. 			prop: "textearea", //字段名
  28. 			placeholder: "请填写输入框", //提示内容
  29. 			width: 12, //参考el-col
  30. 			disabled: false, //是否禁用
  31. 			rules: [{
  32. 				required: true,
  33. 				message: '输入框'
  34. 			}, ] //验证
  35. 		},
  36. 		{
  37. 			select: true,
  38. 			label: "选择框",
  39. 			prop: "select",
  40. 			placeholder: "请选择",
  41. 			width: 12, //参考el-col
  42. 			disabled: false,
  43. 			options: [{
  44. 				label: "options1",
  45. 				value: "1"
  46. 			}, {
  47. 				label: "options2",
  48. 				value: "2"
  49. 			}, ],
  50. 			rules: [{
  51. 				required: true,
  52. 				message: '选择框不能为空！'
  53. 			}]
  54. 		}, {
  55. 			searchSelect: true,
  56. 			label: "select搜索框",
  57. 			prop: "searchSelect",
  58. 			placeholder: "请选择",
  59. 			width: 12, //参考el-col
  60. 			disabled: false,
  61. 			options: [],
  62. 			rules: [{
  63. 				required: true,
  64. 				message: 'select搜索框！'
  65. 			}]
  66. 		}, {
  67. 			dateTimeRange: true,
  68. 			label: "年月日时分秒开",
  69. 			prop: "dateTimeRange",
  70. 			width: 12, //参考el-col
  71. 			disabled: false,
  72. 			options: {
  73. 				selectableRange: '18:30:00 - 20:30:00'
  74. 			},
  75. 			rules: [{
  76. 				required: true,
  77. 				message: '年月日时分秒开'
  78. 			}, ]
  79. 		}, {
  80. 			timePicker: true,
  81. 			label: "时分秒选择器",
  82. 			prop: "timePicker",
  83. 			placeholder: "请选择",
  84. 			width: 12, //参考el-col
  85. 			disabled: false,
  86. 			options: "",
  87. 			rules: [{
  88. 				required: true,
  89. 				message: '时分秒选择器'
  90. 			}, ]
  91. 		}, {
  92. 			timePickerIsRange: true,
  93. 			label: "时分秒开始结束",
  94. 			prop: "timePickerIsRange",
  95. 			placeholder: "请选择",
  96. 			width: 12, //参考el-col
  97. 			disabled: false,
  98. 			options: "",
  99. 			rules: [{
  100. 				required: true,
  101. 				message: '时分秒开始结束'
  102. 			}, ]
  103. 		}, {
  104. 			datePicker: true,
  105. 			label: "年月日选择器",
  106. 			prop: "datePicker",
  107. 			placeholder: "请选择",
  108. 			width: 12, //参考el-col
  109. 			disabled: false,
  110. 			options: "",
  111. 			rules: [{
  112. 				required: true,
  113. 				message: '年月日选择器'
  114. 			}, ]
  115. 		}, {
  116. 			datePickerIsRange: true,
  117. 			label: "年月日开始结束",
  118. 			prop: "datePickerIsRange",
  119. 			placeholder: "请选择",
  120. 			width: 12, //参考el-col
  121. 			disabled: false,
  122. 			options: "",
  123. 			rules: [{
  124. 				required: true,
  125. 				message: '年月日开始结束'
  126. 			}, ]
  127. 		}, {
  128. 			dateTime: true,
  129. 			label: " 年月日时分秒",
  130. 			prop: "dateTime",
  131. 			placeholder: "请选择",
  132. 			width: 12, //参考el-col
  133. 			disabled: false,
  134. 			options: "",
  135. 			rules: [{
  136. 				required: true,
  137. 				message: ' 年月日时分秒'
  138. 			}, ]
  139. 		}, {
  140. 			switch: true,
  141. 			label: "switch",
  142. 			prop: "switch",
  143. 			placeholder: "请选择",
  144. 			width: 12, //参考el-col
  145. 			disabled: false,
  146. 			rules: [{
  147. 				required: true,
  148. 				message: 'switch'
  149. 			}, ]
  150. 		}, {
  151. 			radio: true,
  152. 			label: "单选框",
  153. 			prop: "radio",
  154. 			placeholder: "请选择",
  155. 			width: 12, //参考el-col
  156. 			disabled: false,
  157. 			options: [{
  158. 				label: "单选框1",
  159. 				value: "1"
  160. 			}, {
  161. 				label: "单选框2",
  162. 				value: "2"
  163. 			}, ],
  164. 			rules: [{
  165. 				required: true,
  166. 				message: '单选框不能为空'
  167. 			}, ]
  168. 		}, {
  169. 			checkbox: true,
  170. 			label: "复选框",
  171. 			prop: "checkbox",
  172. 			disabled: false,
  173. 			width: 12, //参考el-col
  174. 			options: [{
  175. 				label: "复选框1",
  176. 				value: "1"
  177. 			}, {
  178. 				label: "复选框2",
  179. 				value: "2"
  180. 			}, {
  181. 				label: "复选框3",
  182. 				value: "3"
  183. 			}, ],
  184. 			rules: [{
  185. 				required: true,
  186. 				message: '复选框不能为空'
  187. 			}, ]
  188. 		},
  189. 		{
  190. 			upload: true,
  191. 			label: "文件上传",
  192. 			prop: "upload",
  193. 			disabled: false,
  194. 			uploadObj: {
  195. 				fileType: "2001",
  196. 				limit: 1, //上传长度限制
  197. 				hideUpload: false, //是否隐藏上传框
  198.  
  199. 			},
  200. 			rules: [{
  201. 				required: true,
  202. 				message: '文件上传'
  203. 			}, ]
  204. 		},
  205. 		{
  206. 			button: true,
  207. 			label: "按钮",
  208. 			prop: "buttona",
  209. 			placeholder:"发送验证码",
  210. 			width: 12, //参考el-col
  211. 			disabled: false,
  212. 		},
  213. 		{
  214. 			text: true,
  215. 			label: "文本",
  216. 			prop: "text",
  217. 			width: 12, //参考el-col
  218. 			disabled: false,
  219. 		},
  220. 		{
  221. 			quillEditor: true,
  222. 			label: "富文本",
  223. 			prop: "quill",
  224. 			disabled: false,
  225. 		},
  226. 	],
  227. 	formData: {
  228. 		input: "",
  229. 		textearea: "",
  230. 		select: "",
  231. 		searchSelect: "",
  232. 		dateTimeRange: [],
  233. 		timePicker: "",
  234. 		timePickerIsRange: [],
  235. 		datePicker: "",
  236. 		datePickerIsRange: [],
  237. 		dateTime: "",
  238. 		date1: "",
  239. 		switch: false,
  240. 		radio: "",
  241. 		checkbox: [],
  242. 		upload: [],
  243. 		text:"这是一段文本，用于预览",
  244. 		quill:{
  245. 			content:""
  246. 		}
  247. 	},
  248. }

4、效果图预览

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/123857
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号