element ui 循环非空验证

最新推荐文章于 2024-07-16 15:48:23 发布

我的小鹿是憨憨

最新推荐文章于 2024-07-16 15:48:23 发布

阅读量488

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_56390627/article/details/124963202

版权

html

<el-collapse-item name="2" title="功能入口组件">
            <div
              v-for="(item, idx) in form.entrance"
              :key="idx"
              class="list-box"
            >
              <el-form-item
                label="功能名称"
                :prop="`entrance.${idx}.text`"
                :rules="{
                  required: true,
                  message: '名称不能为空',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="item.text" />
              </el-form-item>
              <!-- <el-form-item label="表单标题" required>
                <el-input v-model="item.title" />
              </el-form-item> -->
            </div>
          </el-collapse-item>

数据结构

form:{
    entrance: [
          {
            name: '预览',
            text: '展馆预览'
          },
          {
            name: '参观预约',
            text: '参观预约'
          },
          {
            name: '馆藏精品',
            text: '馆藏精品'
          },
          {
            name: '文创商品',
            text: '文创商品'
          }
        ],
}

关键在于这部分