element可增减表单项相关问题记录

最新推荐文章于 2024-10-31 16:52:57 发布

许失之

最新推荐文章于 2024-10-31 16:52:57 发布

阅读量77

点赞数

文章标签： elementui vue 前端

原文链接：https://blog.csdn.net/weixin_43908123/article/details/107778402

版权

本文介绍了在使用Element UI时遇到的关于动态增删行内表单项的挑战，强调了v-for key的正确设置对于避免校验错位的重要性。作者分享了一篇亲测有效的博客链接，并提供了数据驱动的校验规则示例，建议将校验规则写在data里以方便后期维护。此外，还提醒了如何在HTML中引用这些规则。

摘要由CSDN通过智能技术生成

最近在公司项目中发现的一个bug，

首先说明一下这块的一个需求：

有一块的表单含有非常密集的行内表单项，一行六七个，还要可增减T^T，小白被虐得泪流满面，研究element官方文档也没太研究明白，而且这个需求又导致我没办法直接复用文档的代码，就上网各种找，一开始还踩了雷，这里给大家推荐一篇博客，亲测好用：

https://blog.csdn.net/weixin_43908123/article/details/107778402?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-3&spm=1001.2101.3001.4242

这里给大家提个醒，v-for的key一定要设置好，我一开始习惯性用了index，导致后面校验结果提示错位的bug，折腾了好久，又去录了一遍官方文档才解决。

个人建议按照官方文档来，用date数据，确保生成的表单项的唯一性

然后就是校验部分，建议大家还是写在data里面，比如：

data() {
  return {
		ruleFormRules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur' }],
        num: [
          {
            required: true,
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            message: '请输入一个非负数',
            trigger: 'blur',
          },
        ],
      },
  }
}

然后在html中直接引用，方便后期维护：

<el-form-item
    :prop="'ruleList.' + index + '.name'"
    :rules="ruleFormRules.name"
>
</el-form-item>
<el-form-item
    :prop="'ruleList.' + index + '.num'"
    :rules="ruleFormRules.num"
>
</el-form-item>