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

类似这样的:  

 

 

 部分代码删减,  最主要的就是  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'
            }
          ]
        }
      },

 其他参考链接:  https://www.cnblogs.com/slfmeimei/p/14061906.html