html中prependid的作用,带有prependId =“ false”的UIForm中断

我对事实背后的想法有一个疑问,那就是只有UIForm这个属性prependId。为什么在NamingContainer接口中未指定属性?您现在可能会说这是由于向后兼容性,但是我更愿意破坏兼容性,让实现该接口的用户还为prependId事情实现方法。

就UIForm组件中的prependId而言,我的主要问题是,它会中断,findComponent()

我希望如果我使用prependId,NamingContainer行为会发生变化,不仅与渲染有关,而且还与想要在组件树中搜索组件有关。

这里有个简单的例子:

现在,当我想获取panelGroup组件时,我希望将字符串传递"group"给method

findComponent(),但是找不到任何东西,我必须使用它"test:group"。

具体的问题是,将ajax与一起使用时prependId="false"。ajax标记在属性更新和处理中期望值关心命名容器。有点奇怪,当我使用prependId="false"它时必须指定完整的id或路径,但是可以。

好的,这段代码可以毫无问题地呈现,但是由于找不到它,因此不会更新panelGroup。在PartialViewContext将只包含ID

"group"为renderIds的元素。我不知道这是否可以预期,可能是这样,但是我不知道代码。现在我们到了该方法findComponent()找不到组件的地步,因为作为参数传递的表达式是"group"该方法希望"test:group"找到组件的位置。

一种解决方案是编写自己的解决方案,findComponent()这是我选择解决此问题的方法。在这种方法中,我处理一个组件,该组件是a,NamingContainer并且像通常一样将prependId属性设置为false

UIComponent。对于每UIComponent一个提供prependId属性的属性,我都将不得不这样做。反射将有助于绕过类型的静态定义,但它仍然不是一个真正干净的解决方案。

另一种方法是在NamingContainer接口中引入prependId属性,并更改行为以findComponent()使其如上所述工作。

最后提出的解决方案是更改ajax标签的行为以传递整个id,但这只能解决ajax问题,而不能解决findComponent()实现背后的程序性问题。

您对此有何看法,为什么会这样实施呢?我不能成为第一个遇到此问题的人,但是我找不到相关主题?

在Element UI的表单组件`el-form`,如果设置了`required`属性,并且`el-upload`组件的`auto-upload`选项设置为默认值`true`(即文件上传完成后会自动提交表单),可能会遇到已上传文件但仍显示为必填的问题。 当你上传了文件后,表单会认为该字段已经有值,但实际上它仍然期望用户手动填写一些额外的信息,以便确认整个表单是否完整。解决这个问题的一种方法是: 1. 避免自动上传:设置`auto-upload`属性为`false`,然后在用户点击“确定”或者其他提交按钮时,手动触发`handleSuccess`或`handleError`事件去提交表单,此时可以判断文件是否存在,如果存在则忽略必填验证。 ```html <template> <el-form :model="form" :rules="rules" @submit.prevent="submitForm"> <el-form-item label="图片" prop="file"> <el-upload :action="uploadUrl" :file-list="fileList" :on-success="handleSuccess" :auto-upload="false" > <el-button size="small">选择文件</el-button> </el-upload> </el-form-item> <!-- 其他表单内容 --> <el-form-item v-if="showRequiredMessage" :prop="'file'" :rules="{ required: false }"></el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { file: [], }, rules: { // 表单规则 file: [{ required: true, message: '请选择图片', trigger: 'blur' }], }, fileList: [], // 存储上传文件 showRequiredMessage: true, uploadUrl: 'your/upload/url', handleSuccess(file) { this.fileList.push(file); this.showRequiredMessage = false; // 显示已上传,不再需要必填验证 }, }; }, methods: { submitForm() { if (this.fileList.length > 0) { this.$refs.form.submit(); } }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值