element-ui中动态表单组件的数据绑定注意点

最新推荐文章于 2024-08-17 17:56:24 发布

Lykeios

最新推荐文章于 2024-08-17 17:56:24 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： HTML Vue 前端

本文链接：https://blog.csdn.net/Lykeios/article/details/103387486

版权

本文介绍了在使用Element-UI构建动态表单时，如何正确实现数据绑定。强调了v-for循环的对象数组需与el-form的v-model对应，el-form-item的prop、v-model和data字段保持一致以确保验证正常。通过举例说明了prop的动态绑定方式，如:prop="'discounts.'+index+'.reduction'"，并提醒避免因路径错误导致的校验失败问题。

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

          <el-form
            ref="volumeDiscountForm"
            :model="volumeDiscountInfo"
            :rules="rule3"
            label-width="150px"
            class="demo-ruleForm"
          >

......
                    <el-form-item
                      v-for="(discount, index) in volumeDiscountInfo.discounts"
                      :label="(index+1)"
                      :key="discount.key"
                      :prop="'discounts.'+index+'.reduction'"
                      :rules="{
                      required: true,
                      message: '必填项',
                      trigger: 'blur'
                      }"
                      class="filter-item"
                    >
                      <span style="display:inline"