element中el-form-item属性prop踩坑
更新时间：2022年03月25日 15:12:27 作者：浪子尘心
最近需要用到vue，在el-form-item属性prop上遇到报错或者没绑定到数据，本文主要介绍了element中el-form-item属性prop踩坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近负责前后端项目开发，有个需求是实现Djangorestframework(drf)+element实现动态渲染form表单，drf后端提供json，前端从json中获取form表单元素，并且绑定表单验证规则
在el-form-item属性prop上遇到报错或者没绑定到数据，报错如下
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'prop')"
element官方文档解释el-form-item的prop必须是el-form属性model的直接子属性
后端返回数据如下
{
"status": "success",
"code": 200,
"data": {
"form_attributes": {
"inline": true,
"label-width": "auto",
"size": "small"
},
"form_data": {
"name": null,
"path": null,
"component": null,
"hidden": false,
"meta": {
"icon": null,
"title": null
},
"pid": null
},
"form_item_list": [
{
"type": "text",
"prop": "name",
"label": "菜单名",
"placeholder": "请输入菜单名",
"rules": [
{
"required": true,
"message": "请输入菜单名",
"trigger": "blur"
}
]
},
{
"type": "text",
"prop": "path",
"label": "链接地址",
"placeholder": "'/'开头",
"rules": [
{
"required": true,
"message": "'/'开头",
"trigger": "blur"
}
]
},
{
"type": "text",
"prop": "component",
"label": "组件",
"placeholder": "参考前端组件填写",
"rules": [
{
"required": true,
"message": "参考前端组件填写",
"trigger": "blur"
}
]
},
{
"type": "switch",
"prop": "hidden",
"label": "是否隐藏",
"value": false
},
{
"type": "json",
"prop": "meta",
"item": [
{
"type": "text",
"prop": "icon",
"label": "图标",
"placeholder": "图标名字，参考前端图标",
"rules": [
{
"required": true,
"message": "图标名字，参考前端图标",
"trigger": "blur"
}
]
},
{
"type": "text",
"prop": "title",
"label": "标题",
"placeholder": "请输入菜单名",
"rules": [
{
"required": true,
"message": "请输入菜单名",
"trigger": "blur"
}
]
}
]
},
{
"type": "select",
"prop": "pid",
"label": "父菜单",
"clearable": true,
"filterable": false,
"multiple": false,
"options": [
{
"label": "系统管理",
"value": 2
},
{
"label": "用户管理",
"value": 3
},
{
"label": "菜单管理",
"value": 4
},
{
"label": "权限管理",
"value": 5
},
{
"label": "角色管理",
"value": 6
}
]
}
]
},
"message": null
}
从上面可以看到form表单元素对应的是 form_item_list，表单提交数据是 form_data，这两个是分开，也就是el-form中model绑定是 form_data 而el-form-item遍历的是 form_item_list，注意 form_item_list 中含有嵌套类型json，对应的后端是json字段渲染表单，单独提供form_data返回字段设计是为了控制前端json内容，动态字段中过于灵活，可以随意修改json包含的字段和类型，所以返回字段由后端控制和校验
截取前端渲染表单代码如下，注意这个时候能渲染但是rules绑定是失败的
<!-- 添加菜单对话框 -->
<el-dialog title="添加菜单" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal="false" @close="addDialogClosed">
<!-- 表单内容主体 -->
<el-form ref="addFormRef" :model="formData" :size="formAttributes.size" :inline="formAttributes.inline" :label-width="formAttributes.labelWidth">
<div v-for="(item, index) in formItemList" :key="index">
<el-form-item :prop="formItemList + index + item.prop" :label="item.label" :rules="item.rules">
<!-- text输入框 -->
<el-input v-if="item.type==='text'" v-model="formData[item.prop]" clearable :placeholder="item.placeholder"></el-input>
<!-- textarea输入框 -->
<el-input v-if="item.type==='textarea'" v-model="formData[item.prop]" clearable autosize :type="textarea" :placeholder="item.placeholder"></el-input>
<!-- 下拉框 -->
<el-select v-if="item.type==='select'" v-model="formData[item.prop]" clearable :multiple="item.multiple">
<el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value"></el-option>
</el-select>
<el-switch v-if="item.type==='switch'" v-model="formData[item.prop]" :label="item.label"></el-switch>
<template v-if="item.type==='json'">
<div v-for="(json_item, json_index) in item.item" :key="json_index">
<el-form-item :prop="item.item + json_index + json_item.prop" :label="json_item.label" :rules="json_item.rules" style="margin-left: -80px;">
<!-- text输入框 -->
<el-input v-if="json_item.type==='text'" v-model="formData[item.prop][json_item.prop]" clearable :placeholder="json_item.placeholder"></el-input>
<!-- textarea输入框 -->
<el-input v-if="json_item.type==='textarea'" v-model="formData[json_item.prop]" clearable autosize :type="textarea" :placeholder="json_item.placeholder"></el-input>
<!-- 下拉框 -->
<!-- <el-select v-if="item.type==='select'" v-model="formData[item.prop]" clearable :placeholder="item.label" :multiple="item.multiple" @change="item.change(formData[item.prop])"> -->
<el-select v-if="json_item.type==='select'" v-model="formData[json_item.prop]" clearable :multiple="json_item.multiple">
<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-form-item>
</div>
</template>
</el-form-item>
</div>
</el-form>
<!-- 底部 -->
<el-divider></el-divider>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addForm">确定</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].prop + '.' + item.item[json_index].prop" :label="json_item.label" :rules="json_item.rules" style="margin-left: -80px;">
此时能动态渲染表单和绑定表单项验证规则，如下图
总结：上面两种写法都是为了定位到表单元素对应的表单的model直接子属性，踩坑的原因是遍历表单的列表(v-for)和表单提交数据(model)不是在一个对象下，尤其是遍历表单下，还包括嵌套表单json处理，需要注意定位json提交数据
到此这篇关于element中el-form-item属性prop踩坑 的文章就介绍到这了,更多相关element prop属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue开发环境中修改端口号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Vue3.0利用vue-grid-layout插件实现拖拽布局
这篇文章主要介绍了Vue3.0利用vue-grid-layout插件实现拖拽布局，工作中难免遇到需要对页面布局进行拖拽然后改变布局，保存布局，下面文章就围绕Vue3.0利用vue-grid-layout插件实现拖拽布局的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
关于vue 组件还是非常好用的,真正掌握预计需要一段时间,下面这篇文章主要给大家介绍了关于Vue3自动引入组件与组件库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3如何实现挂载并使用axios，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
Vue3中defineEmits、defineProps 不用引入便直接用
这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了vue递归获取父元素的元素实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
React和Vue都使用虚拟DOM和diff算法来更新DOM,但它们在实现上有所不同,React采用基于索引的比较,Vue采用双端比较算法,React在比较时不复用不同类型的节点,而Vue会优先复用两端相同的节点,React对key的依赖较高,而Vue在没有key时也能通过双端比较优化2025-03-03
vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下2018-10-10
最近新做了个项目，前端使用的是目前很流行的前端框架，对于后端，本项目选择的是比较好上手、轻量级的python后台框架：Flask。感兴趣的可以了解一下2021-05-05
这篇文章主要介绍了Vue自定义指令获取不到参数的原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论