Vue 动态生成数据字段的实例

动态生成数据字段实例

1.父组件定义data里面的数据字段

异步请求获取数据(一种配置数据,一种实际数据)


 	data () {
 	     return {
 	     config: [],
 	     list: []
 	     };
 	}

2.子组件接收数据


 	props: {
 	     config: Array,
 	     list: Array
 	},
 	data () {
 	     return {
 	     newConfig: [],
 	     configLength: 0,
 	     newList: []
 	     };
 	}

3.因为获取数据是异步操作

因此需要监听数据变化,当有数据时展示子组件


 	configLoaded: false,
 	listLoaded: false

定义上面两个变量来判断数据是否加载完成,在异步获取完数据后赋值为true,并监听


 	watch: {
 	     configLoaded (n, o) {
 	     this.configLoaded = n;
 	     },
 	     listLoaded (n, o) {
 	     this.listLoaded = n;
 	     }
 	},

4.计算属性计算两个变量是否均完成

并执行v-if


 	computed: {
 	     showItem () {
 	     return this.configLoaded && this.listLoaded;
 	     }
 	},
 	<list-item :config="config" :list="list" v-if="showItem"></list-item>

5.子组件完整代码


 	<template>
 	     <div>
 	     <div class="item iconfont border-bottom" v-for="(item,index) of newList" :key="index">
 	     <p v-for="(m,i) of item" :key="i">{{m.name}} {{m.text}}
 	     </div>
 	     </div>
 	</template>

 


 	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09%20%20%20%20%20export%20default%20%7B%0A%20%09%20%20%20%20%20name%3A%20'Item'%2C%0A%20%09%20%20%20%20%20props%3A%20%7B%0A%20%09%20%20%20%20%20config%3A%20Array%2C%0A%20%09%20%20%20%20%20list%3A%20Array%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20data%20()%20%7B%0A%20%09%20%20%20%20%20return%20%7B%0A%20%09%20%20%20%20%20newConfig%3A%20%5B%5D%2C%0A%20%09%20%20%20%20%20configLength%3A%200%2C%0A%20%09%20%20%20%20%20newList%3A%20%5B%5D%0A%20%09%20%20%20%20%20%7D%3B%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20mounted%20()%20%7B%0A%20%09%20%20%20%20%20this.toConfig()%3B%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20methods%3A%20%7B%0A%20%09%20%20%20%20%20toConfig%20()%20%7B%0A%20%09%20%20%20%20%20this.configLength%20%3D%20this.config.length%3B%0A%20%09%20%20%20%20%20for%20(let%20i%20in%20this.config)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20let%20configItem%20%3D%20this.config%5Bi%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20this.newConfig.push(%7Bname%3A%20configItem.fieldName%2C%20text%3A%20configItem.fieldDesc%7D)%3B%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20for%20(let%20l%20in%20this.list)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20let%20item%20%3D%20this.list%5Bl%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20let%20childList%20%3D%20%5B%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20for%20(var%20c%20in%20this.newConfig)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20let%20config%20%3D%20this.newConfig%5Bc%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20for%20(let%20key%20in%20item)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20if%20(config.name%20%3D%3D%3D%20key)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20childList.push(%7Bname%3A%20config.text%2C%20text%3A%20item%5Bkey%5D%7D)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20this.newList.push(childList)%3B%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%3B%0A%20%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	 
 	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20lang%3D%22stylus%22%20ref%3D%22stylesheet%2Fstylus%22%3E%0A%20%09%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

表单动态生成字段

checkbox 多选,没有默认值的时候,一定要给一个空数组,不然就展示不出来


 	<el-form ref="myForm" :model="form" :rules="rules" :disabled="disabledBoolean">
 	     <el-row>
 	<el-col>
 	     <div v-for="(item ,index) in extendFieldColumns" :key="index" >
 	     <el-col v-if="item.type === 'input'" :span="defaultSpan">
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :rules="extendFieldRules[item.prop]" :prop="'extendField.'+item.prop" :label="item.label+':'" >
 	         <el-input v-model="form.extendField[item.prop]" :maxlength="item.maxlength" placeholder="请输入内容"></el-input>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'radio'" :span="defaultSpan">
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :rules="extendFieldRules[item.prop]" :prop="'extendField.'+item.prop" :label="item.label+':'" >
 	         <el-radio-group v-model="form.extendField[item.prop]" >
 	             <el-radio v-for="(option,index1) in item.dicData" :key="index1" :label="option.label" >{{option.label}}</el-radio>
 	         </el-radio-group>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'select'" :span="defaultSpan" >
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]">
 	         <el-select v-model="form.extendField[item.prop]" placeholder="请选择">
 	             <el-option
 	v-for="(option,index2) in item.dicData"
 	:key="index2"
 	:label="option.label"
 	:value="option.label">
 	             </el-option>
 	         </el-select>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'checkbox'" :span="defaultSpan" >
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]">
 	         <el-checkbox-group v-model="form.extendField[item.prop]" >
 	             <el-checkbox v-for="city in item.dicData" :label="city.label" :key="city.label">{{city.label}}</el-checkbox>
 	         </el-checkbox-group>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'number'" :span="defaultSpan" >
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]">
 	         <el-input-number v-model="form.extendField[item.prop]" :max="item.maxlength" ></el-input-number>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'textarea'" :span="defaultSpan" >
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]">
 	         <el-input
 	             v-model="form.extendField[item.prop]"
 	             :maxlength="item.maxlength"
 	             type="textarea"
 	             placeholder="请输入内容"
 	         >
 	         </el-input>
 	         </el-form-item>
 	     </el-col>
 	     <el-col v-if="item.type === 'date'" :span="defaultSpan" >
 	         <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]">
 	         <el-date-picker
 	             v-model="form.extendField[item.prop]"
 	             type="date"
 	             placeholder="选择日期">
 	         </el-date-picker>
 	         </el-form-item>
 	     </el-col>
 	     </div>
 	</el-col>
 	</el-row>
 	</el-form>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

标签

发表评论