ElementUI 爬坑记录

最新推荐文章于 2023-07-02 01:34:27 发布

LesterWeng

最新推荐文章于 2023-07-02 01:34:27 发布

阅读量415

点赞数 1

CC 4.0 BY-SA版权

分类专栏： UI框架文章标签： elementUI form

本文链接：https://blog.youkuaiyun.com/qq_33576343/article/details/82906650

UI框架专栏收录该内容

1 篇文章

订阅专栏

本文详细讲解了如何在Vue中使用Element UI组件库进行Form动态Item的校验及数据绑定，包括model的正确使用方式、prop规则、以及在特定条件下的v-model数据更新。同时，还介绍了pagination配置注意事项和el-dropdown在el-table-column模板中的正确用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Form动态item校验，数据绑定：

model 只能为对象
prop的书写规则：使用字符串拼接，即 'model + prop' 所取得值要对应v-model中的数据（对象的点语法与数组的index取值都是用点代替），举例如下：

      <el-form
        v-if="radioVals[index] === '1'"
        :model="forms[index]"
        :ref="'form'+index"
        class="margin-tb-2"
      >
        <el-form-item
          v-for="(t, i) in Array.apply(null, {length: items[index].rotateAccount})"
          :key="i"
          :prop="'texts.'+i"
          :rules="{required: true, message: '请輸入素材文本', trigger: 'blur'}"
        >
          <el-input
            type="textarea"
            rows="4"
            @change="submit"
            :placeholder="`*素材文本${i+1}`"
            v-model="forms[index].texts[i]"
          ></el-input>
        </el-form-item>
      </el-form>

2. pagination的pager-count注意需要是大于等于5且小于等于21的奇数

3. el-dropdown置于el-table-column的template内时，template必须指定slot-scope方可使用

欢迎关注、点赞