vue 动态数据,
这篇文章主要介绍了某视频剪辑软件动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
动态生成数据字段实例1.父组件定义数据里面的数据字段2.子组件接收数据3.因为获取数据是异步操作4.计算属性计算两个变量是否均完成5.子组件完整代码表单动态生成字段
动态生成数据字段实例
1.父组件定义data里面的数据字段
异步请求获取数据（一种配置数据，一种实际数据)
data () {
返回{
配置：[],
列表：[]
};
}
2.子组件接收数据
道具：{
配置：数组，
列表：数组
},
data () {
返回{
新配置：[],
配置长度：0,
新列表：[]
};
}
3.因为获取数据是异步操作
因此需要监听数据变化，当有数据时展示子组件
configLoaded: false，
listLoaded: false
定义上面两个变量来判断数据是否加载完成，在异步获取完数据后赋值为没错，并监听
观察：{
configLoaded (n，o) {
这个。config loaded=n；
},
listLoaded (n，o) {
这个。list loaded=n；
}
},
4.计算属性计算两个变量是否均完成
并执行控制显示
计算值：{
showItem () {
返回这个。config加载了这个。列表已加载；
}
},
list-item:config= config :list= list v-if= show item /list-item
5.子组件完整代码
模板
差异
项目图标字体border-bottom v-for=(项目，索引)of newList :key=index
p v-for=(m，I)of item :key= I { { m . name } } { { m . text } }/p
/div
/div
/模板
脚本
导出默认值{
名称：项目，
道具：{
配置：数组，
列表：数组
},
data () {
返回{
新配置：[],
配置长度：0,
新列表：[]
};
},
已安装(){
这个。to config()；
},
方法：{
toConfig () {
这个。配置长度=this。配置。长度；
对于(让我在this.config中){
设配置项目=this。config[I]；
这个。新配置。推送({ name:config item。字段名称，文本：配置项。场desc })；
}
对于（让l在这个列表中){
让item=this。list[l]；
let子列表=[]；
对于(这个。新配置中的变量c){
让config=this。新配置[c]；
用于（输入项目){
if (config.name===key) {
子列表。推({ name:config。text，text:item[key]})；
}
}
}
这个。新列表。推送(子列表)；
}
}
}
};
/脚本
style lang= stylus ref= style sheet/stylus
/风格
表单动态生成字段
检验盒多选，没有默认值的时候，一定要给一个空数组，不然就展示不出来
El-form ref=" my form ":model=" form ":rules=" rules ":disabled=" disabled boolean "
el-row
埃尔-科尔
div v-for=(item，index)in extendFieldColumns :key= index
El-col v-if= item。type=== input :span= default span
El-form-item:label-width= defaultLabelWidth size= small :rules= extendFieldRules[item。prop]:prop= 扩展字段. item.prop :label=item.label :
El-input v-model= form。扩展字段[项目。prop]:maxlength= item。maxlength placeholder=请输入内容/el-input
/El-表单-项目
/el-col
El-col v-if= item。type== radio :span= default span
El-form-item:label-width= defaultLabelWidth size= small :rules= extendFieldRules[item。prop]:prop= 扩展字段. item.prop :label=item.label :
El-radio-group v-model= form。扩展字段[项目。道具]
项目中的el-radio v-for=(选项，索引1)。 dicdata :key= index 1 :label=选项。标签“{ option。label } }/El-radio
/el-radio-group
/El-表单-项目
/el-col
El-col v-if= item。type=== select :span= default span
El-form-item:label-width= defaultLabelWidth size= small :prop= 扩展字段.项目。 prop :label= item。标签“:”:rules=“extendFieldRules[item。道具]
El-select v-model= form。扩展字段[项目。prop] placeholder=请选择
埃尔选项
item.dicData中的v-for=(选项，索引2
:key=index2
:label=option.label
:value=option.label
/el选项
/el-select
/El-表单-项目
/el-col
El-col v-if= item。type=== checkbox :span= default span
El-form-item:label-width= defaultLabelWidth size= small :prop= 扩展字段.项目。 prop :label= item。标签“:”:rules=“extendFieldRules[item。道具]
El-checkbox-group v-model= form。扩展字段[项目。道具]
El-复选框v-表示项目中的=城市。 dicdata :label= city。 label :key= city。标签“{ city。label } }/El-复选框
/el-checkbox-group
/El-表单-项目
/el-col
El-col v-if= item。type=== number :span= default span
El-form-item:label-width= defaultLabelWidth size= small :prop= 扩展字段.项目。 prop :label= item。标签“:”:rules=“extendFieldRules[item。道具]
El-input-number v-model=形式。扩展字段[项目。prop]:max= item。maxlength /El-输入数量
/El-表单-项目
/el-col
El-col v-if= item。type== textarea :span= default span
El-form-item:label-width= defaultLabelWidth size= small :prop= 扩展字段.项目。 prop :label= item。标签“:”:rules=“extendFieldRules[item。道具]
埃尔输入
v-model=形式。扩展字段[项目。道具]
:maxlength=item.maxlength
type=textarea
占位符=请输入内容
/el-input
/El-表单-项目
/el-col
El-col v-if= item。type=== date :span= default span
El-form-item:label-width= defaultLabelWidth size= small :prop= 扩展字段.项目。 prop :label= item。标签“:”:rules=“extendFieldRules[item。道具]
埃尔-日期选择器
v-model=形式。扩展字段[项目。道具]
type=date
占位符=选择日期
/El-日期选择器
/El-表单-项目
/el-col
/div
/el-col
/el-row
/el格式
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。