element-ui el-form 某一值为数组,各项必填验证

作者:神秘网友 发布时间:2021-11-25 14:06:32

element-ui el-form 某一值为数组,各项必填验证

template
  div
        el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          size="small"
          class="demo-ruleForm"
        
          el-form-item label="问题" prop="question"
            el-input
              v-model="ruleForm.question"
              maxlength="30"
              clearable
              placeholder="请输入问题"
            /el-input
          /el-form-item
          div v-for="(item, index) in ruleForm.items" :key="index"
            el-form-item
              :label="'选项' + (index + 1)"
              :prop="`items[${index}].answer`"
              :rules="{ required: true, message: '请输入答案', trigger: 'blur' }"
            
              el-input
                v-model="item.answer"
                maxlength="30"
                clearable
                placeholder="请输入答案"
              /el-input
              el-button
                v-if="index  0"
                type="text"
                @click="deleteItem(index)"
                size="small"
                删除/el-button
              
            /el-form-item
          /div
          el-form-item label=""
            el-button
              :disabled="ruleForm.items.length = 5"
              type="text"
              @click="addItem()"
              size="small"
              icon="el-icon-plus"
              确认添加/el-button
            
          /el-form-item
        /el-form
  /div
/template

script
export default {
  data() {
    return {
      ruleForm: {
        question: "",
        items: [
          {
            answer: "",
          },
        ],
      },
      rules: {
        question: [{ required: true, message: "请输入问题", trigger: "blur" }],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    addItem() {
      if (this.ruleForm.items.length = 5) return;
      this.ruleForm.items.push({
        answer: "",
      });
    },
    deleteItem(index) {
      this.ruleForm.items.splice(index, 1);
    },
  },
};
/script

style scoped lang="scss"/style
  

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

element-ui el-form 某一值为数组,各项必填验证 相关文章

  1. element-ui中el-form自定义验证(调用后端接口)

    element-ui中el-form自定义验证(调用后端接口) 在输入项目名称后,调用后端接口isNameOnly,若已存在,则效果如下图: 先设置校验规则rules el-form :model=ruleForm :rules=rules ref=ruleForm label-width=100px class=demo-ruleForm 在return中定义 //

  2. element form表单+upload组件必填字段验证失败问题

    element form表单+upload组件必填字段验证失败问题 前言 表单内有个上传图片,逻辑是:先不上传图片,点击保存。然后候验证失败,再上传图片。点击保存。这时候,form表单验证始终提示resouce不能为空。然而在else里面打印的它是...

  3. Element-Ui Form 正则判断

    proveId: [ { required: true, trigger: "blur", message: "请填写身份证号" }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '证件号码不正确' } ], mail: [ { required: true, trigger: "blur", message: "请填写邮箱" }, { pattern:

  4. el-form-item中的样式和验证

    el-form-item中的样式和验证 想要实现上面那种格式,然后又对input框中的值进行验证,要求都必须是数字。 代码: !-- 配置报警值弹出框 -- el-dialog title=配置报警值 :visible.sync=peiVisible1 width=40% class=dialoge_black el-form ref=peiform1 :model

  5. Element Form表单、验证总汇

    Element Form表单、验证总汇 1、table内可编辑 表单验证、自定义验证 html el-form :model=formData :rules=rules el-table :data=formData.tableData style=width: 100%el-table-column prop=date label=日期 width=180/el-table-columnel-table-column prop

  6. 【element-ui笔记】element中el-table(合计)计算指定列

    【element-ui笔记】element中el-table(合计)计算指定列 1.需求:我只需要前面三列的合计,最后一列不需要 找了很久,看到element-ui里面的show-summary方法,以及自定义的:summary-method,觉得很合适 以下是官网说明: 实现代码如下: el-...

  7. element UI使用el-container布局时 丢失el-header 和 el-footer

    element UI使用el-container布局时 丢失el-header 和 el-footer 在element UI使用el-container布局时将 el-header ,el-main ,el-footer封装成组件,导致丢失了布局样式,导致布局错误 官网文档: 封装成组件后,el-container中没有了el-footer,el-main和e

  8. 关于element-ui中,el

    现象:el-input或者input标签中,输入空格无效,并不能加入到字符串中。 原因:众多原因之一: 1. 首先,这是在vue项目中,那么检查el-input或者input外层包的dom元素。 检查是否有el-menu这个元素包在了el-input外层或者input外层,如...

  9. vue使用element-ui el-input+el-tree

    vue使用element-ui el-input+el-tree 简介:主要为树形下拉框选择数据对应input展示值 效果图: html el-form :v-model=form el-form-item el-input placeholder=请选择菜单分类 class=selectTree-input auto-complete=off v-model=form.inputText @click.nat

  10. 基于element UI下el-select的拼音检索

    自行安装 elementUI和pinyin-match组件templateel-selectv-model="newValue":filterable="filterable":multiple="multiple":filter-method="filterMethod"v-bind="$attrs":value-key="props.value":disabled="disabled":clearable="clearable"v-on="$listener

  11. Vue Element Ui中 Table 表格更改某一列的样式,比如说背景色

    Vue Element Ui中 Table 表格更改某一列的样式,比如说背景色 先在Table 表格 上加 上属性 el-table :data=tableList border :cell-style=columnStyle el-table-column type=index label=第一列 width=50px/el-table-column el-table-column type=index label

  12. element-ui的el-backtop用法

    element-ui的el-backtop用法 注意 必须在一个div内写el-backtop,其次这个div要有个类选择器,el-backtop的target写这个div的类选择器的名字,这个div的类选择器的样式必须有这俩个 不要修改 大功告成!!!

  13. element UI form 表单中number 类型的字段校验的时候不准确

    element UI form 表单中number 类型的字段校验的时候不准确 遇到的问题:element UI form 表单中number 类型的字段校验时,不能准备的进行校验 查看了一下element UI版本,发现v2.4版本以前的均有bug number ', message: '年龄必须为数字值'} ] el-in...

  14. element-ui的el-table表格合并列

    element-ui的el-table表格合并列 一、需求描述,如图,相同的区域位置进行合并,前提:后台给的数据相同区域名称的要放在临近。 二、代码实现 1、html页面 el-table :data=tableData border size=mini align=center :span-method=objectSpanMethod el-table-c

  15. Element UI el-upload 组件上传文件时同时携带其他参数

    Element UI el-upload 组件上传文件时同时携带其他参数 方式一 如果参数比较少,而且没有非法字符,直接放在 URL 上也是可以的。也就是通过 ?name=张三 这种方式 如果含有非法字符,那么你可能看到如下错误: 方式二 如果参数不希...

  16. element-ui el-table 如何按对象展示多列重复数据

    element-ui el-table 如何按对象展示多列重复数据?? el-table要怎么样才能实一下效果? 排名、学号、姓名、总分为一个对象信息, 要怎么才能实现一个table里面循环3列这个对象信息,实现下图效果??? 数据排名可不按图中所示...

  17. element-ui中隐藏组件el-scrollbar的使用

    element-ui中隐藏组件el-scrollbar的使用 一、使用 虽然官网没有介绍该组件,但是网上有许多小伙伴扒了源码并提供了使用方法 el-scrollbar class= view-class= wrap-class= tag=/el-scrollbar 属性 props: { native: Boolean, // 是否使用本原生滚动条,设为...

  18. element-ui的el-table怎么自定义合并表头

    element-ui的el-table怎么自定义合并表头 table自带合并属性:rowSpan和colSpan,所以合并表头的思路是:获取所有的表头单元格,针对性的对需要合并的单元格进行操作。 比如我们想要合并的是第二列和第三列,那么我们先获取到所有...

  19. 让element-ui中el-select不换行的方式

    让element-ui中el-select不换行的方式 在elementui中,使用select多选的方式,往往会把高度撑开了 我们查看console中,dom元素,发现产生如下元素,把高度给撑开了 解决方案如下: 在style中,增加如下css(不能在scoped中添加,在scoped中...

  20. element ui中table组件el-table中添加序号

    element ui中table组件el-table中添加序号 ui上面有一个序号一栏 拿着后端返回的数据发现没有序号字段 屁颠屁颠的去问后端要 后来才醒悟 序号这玩意还得前端来 傻不拉几的 方法一: 翻到这篇文章的都是跟我一样 没有认真看element-...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词