element-ui表单校验prop的链式写法

2022-08-20 10:04:39 阅读：141 来源： 互联网

类似这样的:

部分代码删减, 最主要的就是 element-ui表单校验prop的链式写法

:prop="'list.'+index+'.name'" 或者:prop="'list[0].name'"两种形式都可以访问

element源码中接收的是一个字符串，上面的里那两种形式都是可以的，最终经过源码处理，都转为了list.0.value的形式

<el-form-item label="app自定义显示内容" required>
          <div
            class="selectCustomInfo"
            v-for="(item, index) of temp.content"
            :key="index"
          >
            <el-form-item
              :prop="'content.' + index + '.name'"
              :rules="rules.customInfoGroup.name"
              class="nameInput"
            >
              <el-input
                v-model.trim="item.name"
                placeholder="内容标题"
                maxlength="8"
                show-word-limit
              />
            </el-form-item>

            <span>:</span>
            <el-form-item
              :prop="'content.' + index + '.value'"
              :rules="rules.customInfoGroup.value"
              class="valueInput"
            >
              <el-input
                v-model.trim="item.value"
                placeholder="内容描述"
                maxlength="30"
                show-word-limit
              />
            </el-form-item>

            <!-- 加号按钮 -->
            <el-button
              v-if="index == 0"
              type="primary"
              icon="el-icon-plus"
              class="funcBtn"
              @click="addCustomInfoItem"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              v-else
              class="funcBtn"
              icon="el-icon-delete"
              @click="delCustomInfoItem(index)"
            ></el-button>
          </div>
        </el-form-item>

//   表单验证规则
      rules: {
        // customInfo链式校验数组里面的对象的每个值
        customInfoGroup: {
          name: [
            {
              required: true,
              message: '内容不能为空',
              trigger: 'change'
            }
          ],
          value: [
            {
              required: true,
              message: '内容不能为空',
              trigger: 'change'
            }
          ]
        }
      },

标签：name,校验,表单,ui,链式,element,prop
来源： https://www.cnblogs.com/520BigBear/p/16607185.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element-ui表单校验prop的链式写法