form表单内层嵌套再嵌套的prop写法

好几次就是碰到这个写法记录下，嵌套双层~

功能如下，点击上面的新增1，每次增加一个大的项，点击删除1删除一整个，点击增加2增加子栏目一项，点击删除2删除一项~

数据结构：

formData：{

      colomun：[

                   {

                      options:[ { }]

                    }

                         ]

                     } 

内层嵌套检验规则的prop如果写错会存在相应的报错 或者不校验的情况

1.

2.不校验的话基本上就是写成了和v-model一样，至于为啥不生效校验不太懂

只能写成  :prop="`columnList.${index}.options.${k}.name`"

功能示意图：

代码完整的，增加删除函数省略~~~

      <el-form
        :model="formData"
        ref="formData"
        label-width="150px"
        class="demo-dynamic"
        label-position="top"
      >
        <div
          class="mini-cont bg-purple-light"
          v-for="(item, index) in formData.columnList"
          :key="index"
        >
          <div class="grid-content1">体验项目{{ index + 1 }}</div>
          <div class="" style="width: 100%">
            <el-form-item
              :prop="`columnList.${index}.name`"
              label="体验项目"
              :rules="{
                required: true,
                message: '体验项目不能为空',
                trigger: 'blur',
              }"
            >
              <div class="flexItem">
                <el-input v-model="item.name" maxlength="20"></el-input>
                <el-button
                  type="danger"
                  style="margin: 0 28px"
                  @click="handleMeetRemove(index)"
                  >删除</el-button
                >
                <el-button type="primary" @click="handleItem(index)"
                  >增加</el-button
                >
              </div>
            </el-form-item>

            <div
              class="flexItem"
              v-for="(meetItem, k) in item.options"
              :key="k"
            >
              <el-form-item
                :label="`体验项目子栏目${k + 1}`"
                style="width: 30%"
                :prop="`columnList.${index}.options.${k}.name`"
                :rules="{
                  required: true,
                  message: '体验项目子栏目不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.options[k].name"></el-input>
              </el-form-item>

              <el-form-item
                :label="`体验项目子栏目价格${k + 1}`"
                style="width: 28%"
                :prop="`columnList.${index}.options.${k}.price`"
                :rules="{
                  required: true,
                  message: '体验项目子栏目价格不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="item.options[k].price"
                  @blur="testPrice(item.options[k].price, index, k)"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="danger" @click="handleItemRemove(index, k)"
                  >删除</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>