elementui prop,element prop
最近需要用到vue，在埃尔-表单-项目属性支柱上遇到报错或者没绑定到数据，本文主要介绍了元素中埃尔-表单-项目属性支柱踩坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近负责前后端项目开发，有个需求是实现Djangorestframework元素实现动态渲染形式表单，drf后端提供json，前端从数据中获取形式表单元素，并且绑定表单验证规则
在埃尔-表单-项目属性支柱上遇到报错或者没绑定到数据，报错如下
[警告]:渲染中的错误："类型错误：无法读取不明确的的属性（读取"道具")"
元素官方文档解释埃尔-表单-项目的支柱必须是埃尔格式属性模型的直接子属性
后端返回数据如下
{
状态:成功，
代码:200,
数据:{
表单_属性:{
inline: true，
标签宽度:自动，
尺寸:小
},
表单_数据：
name: null，
path: null，
component: null，
hidden: false，
meta: {
图标:空，
标题:空
},
pid: null
},
表单_项目_列表:[
{
键入:文本，
道具:名称，
标签: 菜单名，
占位符":"请输入菜单名，
规则:[
{
required: true，
消息":"请输入菜单名，
触发器:模糊
}
]
},
{
键入:文本，
prop: path ，
标签: 链接地址，
占位符": /"开头，
规则:[
{
required: true，
消息": /"开头，
触发器:模糊
}
]
},
{
键入:文本，
道具:组件，
标签: 组件，
占位符":"参考前端组件填写，
规则:[
{
required: true，
消息":"参考前端组件填写，
触发器:模糊
}
]
},
{
类型:开关，
道具:隐藏，
标签: 是否隐藏，
"值":假
},
{
类型： json ，
prop: meta ，
项目:[
{
键入:文本，
道具:图标，
标签: 图标，
占位符":"图标名字，参考前端图标，
规则:[
{
required: true，
消息":"图标名字，参考前端图标，
触发器:模糊
}
]
},
{
键入:文本，
道具:标题，
标签: 标题，
占位符":"请输入菜单名，
规则:[
{
required: true，
消息":"请输入菜单名，
触发器:模糊
}
]
}
]
},
{
键入:选择，
道具： pid ，
标签: 父菜单，
“可清除”:真，
filterable: false，
multiple: false，
选项:[
{
标签: 系统管理，
值:2
},
{
标签: 用户管理，
值:3
},
{
标签: 菜单管理，
值:4
},
{
标签: 权限管理，
值:5
},
{
标签: 角色管理，
值:6
}
]
}
]
},
message: null
}
从上面可以看到形式表单元素对应的是表单_项目_列表，表单提交数据是表单_数据，这两个是分开，也就是埃尔格式中模型绑定是表单_数据而埃尔-表单-项目遍历的是表单_项目_列表，注意表单_项目_列表中含有嵌套类型json，对应的后端是数据字段渲染表单，单独提供表单_数据返回字段设计是为了控制前端数据内容，动态字段中过于灵活，可以随意修改数据包含的字段和类型，所以返回字段由后端控制和校验
截取前端渲染表单代码如下，注意这个时候能渲染但是规则绑定是失败的
！-添加菜单对话框-
el-dialog title=添加菜单：可见。sync= addDialogVisible width= 50% :close-on-click-modal= false @ close= addDialogClosed
！-表单内容主体-
El-form ref= addFormRef :model= formData :size=格式属性。 size :inline=格式属性。“inline”:label-width=“格式属性。标签宽度
div v-for=(item，index)in formItemList :key= index
El-form-item:prop= formItemList索引项。 prop :label= item。 label :rules= item。规则
！-文本输入框-
El-输入v-if= item。type=== text v-model= formData[item。prop] clearable:placeholder= item。占位符/El-输入
！-文本区输入框-
El-输入v-if= item。type== textarea v-model= formData[item。prop] clearable autosize:type= textarea :placeholder= item。占位符/El-输入
！-下拉框-
El-select v-if= item。type=== select v-model= formData[item。prop] clearable:multiple= item。多个
El-选项v-for= op in item。 options :key=运算值:label=运算标签:value=运算值/El-option
/el-select
El开关v-if= item。type=== switch v-model= formData[item。prop]:label= item。标签/El开关
模板v-if=item.type===json
关键字=json_index
El-form-item:prop= item。项目JSON _ index JSON _ item。 prop :label= JSON _ item。 label :rules= JSON _ item。rules style= margin-left:-80px；
！-文本输入框-
El输入v-if= JSON _ item。type=== text v-model= formData[item。prop][JSON _ item。prop] clearable:placeholder= JSON _ item。占位符/El-输入
！-文本区输入框-
El输入v-if= JSON _ item。type=== textarea v-model= formData[JSON _ item。prop] clearable autosize:type= textarea :placeholder= JSON _ item。占位符/El-输入
！-下拉框-
！-El-select v-if= item。type=== select v-model= formData[item。prop] clearable:placeholder= item。 label :multiple= item。多个“@ change=”项目。更改(formData[item。道具])-
El-select v-if= JSON _ item。type=== select v-model= formData[JSON _ item。prop] clearable:multiple= JSON _ item。多个
El-option v-for= op in JSON _ item . options :key= op . value :label= op . label :value= op . value /El-option
/el-select
El-switch v-if= JSON _ item . type=== switch v-model= formData[JSON _ item . prop]:label= JSON _ item . label /El-switch
/El-表单-项目
/div
/模板
/El-表单-项目
/div
/el格式
！-底部-
el分配器/el分配器
span slot=页脚 class=对话框-页脚
El-button @ click= adddialogvisible=false 取消/el-button
El-button type= primary @ click= addform OK/El-button
/span
/el-dialog
前端渲染无法绑定到表单规则，如下图所示。
经过研究，从上面的数据结构中可以发现，form_data中的每个元素都对应着form_item_list中的prop，所以有两种定位方式。
第一种写法如下，不那么直观。
！-普通现场渲染-
El-form-item:prop= item . prop :label= item . label :rules= item . rules
！- json字段渲染-
el-form-item :prop=item.prop 。 JSON _ item . prop :label= JSON _ item . label :rules= JSON _ item . rules style= margin-left:-80px；
更好的第二种写法如下
El-form-item:prop= formItemList[index]. prop :label= item . label :rules= item . rules
El-form-item:prop= formItemList[index].道具。item.item[json_index]。 prop :label= JSON _ item . label :rules= JSON _ item . rules style= margin-left:-80px；
此时可以动态渲染表单，绑定表单项验证规则，如下图所示。
总结：以上两种方法用于定位表单元素对应的表单模型的直接子属性。踩坑的原因是遍历表单的列表(v-for)和表单提交数据(model)不在同一个对象下，尤其是遍历表单下，这也包括嵌套表单的json处理。需要注意定位json提交数据。
这就是这篇关于el-form-item属性prop踩在元素坑上的文章。有关元素属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。