element-ui 动态表单

这篇具有很好参考价值的文章主要介绍了element-ui 动态表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:朋友入职新公司,做项目重构,根据后端返回表单内容,动态生成表单,于是自己实现了下,哪里写的不好,欢迎各位提建议:

因为开关和多选框默认值是非空字符串,所以在created生命周期单独处理了下文章来源地址https://www.toymoban.com/news/detail-507718.html

<template>
  <div class="home">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item v-for="(item,index) in list" :key="index" :label="item.label">
        <el-input v-if="item.type === 'input'" v-model="form[item.key]"></el-input>
        <el-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择活动区域">
          <el-option v-for="element in item.select" :key="element.label" :label="element.label" :value="element.value"></el-option>
        </el-select>
        <el-date-picker v-if="item.type === 'date-picker'" type="date" placeholder="选择日期" v-model="form[item.key]" style="width: 100%;"></el-date-picker>
        <el-switch v-if="item.type === 'switch'" v-model="form[item.key]"></el-switch>
        <el-checkbox-group v-if="item.type === 'checkbox-group'" v-model="form[item.key]">
          <el-checkbox v-for="element in item.select" :key="element.label" :label="element.label" name="type"></el-checkbox>
        </el-checkbox-group>
        <el-radio-group v-if="item.type === 'radio-group'" v-model="form[item.key]">
          <el-radio v-for="element in item.select" :key="element.label" :label="element.label"></el-radio>
        </el-radio-group>
        <el-input v-if="item.type === 'textarea'" type="textarea" v-model="form[item.key]"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "Home",
  components: {
  },
  data() {
    return {
      form: {
      },
      list: [
        {
          label: "xxx",
          type: "input",
          key: "key1",
        },
        {
          label: "xxx",
          type: "date-picker",
          key: "key2",
        },
        {
          label: "xxx",
          type: "select",
          key: "key3",
          select: [
            {
              label: "下拉框1",
              value: "1",
            },
            {
              label: "下拉框2",
              value: "2",
            },
          ],
        },
        {
          label: "xxx",
          type: "switch",
          key: "key4",
        },
        {
          label: "xxx",
          type: "checkbox-group",
          key: "key5",
          select: [
            {
              label: "下拉框1",
              value: "1",
            },
            {
              label: "下拉框2",
              value: "2",
            },
          ],
        },
        {
          label: "xxx",
          type: "radio-group",
          key: "key6",
          select: [
            {
              label: "下拉框1",
              value: "1",
            },
            {
              label: "下拉框2",
              value: "2",
            },
          ],
        },
        {
          label: "xxx",
          type: "textarea",
          key: "key7",
        }
      ],
    };
  },
  created () {
    const form = {}
    this.list.forEach(item => {
      if (item.type === 'checkbox-group') {
        form[item.key] = []
      } else if (item.type === 'switch') {
        form[item.key] = false
      }
    })
    this.form = form
  }
}
</script>

到了这里,关于element-ui 动态表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui表单动态添加必填校验

    业务场景:根据form表单中的某些下拉框选中值,动态切换一些属性的必填校验。 效果图: 当活动区域非必填时,活动名称取消必填校验,否则活动名称必填。

    2024年02月11日
    浏览(46)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(47)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(56)
  • Vue+Element-UI el-form表单动态检验

    业务需求: 表单el-form 有一表单项:发布时间 ,有5个选项:今天、24小时、近3天、近7天和自定义时间,其中当选择自定义时间时,后面跟着的日期时间选择器是必填的,选中其他选项时则不需要。这就需要做到表单的动态检验。 最开始实现方式是在当前表单项中设置规则

    2024年02月11日
    浏览(54)
  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(60)
  • element-ui 表单校验・大全

    element-ui 官网 element-ui 表单校验的规则如下:

    2024年02月08日
    浏览(58)
  • Element-ui 多表单同时验证

     如上图表单  [列二 列三 ]  由列一循环出来的数据  所用的校验规则相同   方法一:         拿到表单list数据循环遍历(通过正则/其他)进行校验   上图校验按实际需求只要不为空即可 方法二:         通过element表单的rules属性进行校验   定义好rules校验规则配合方法v

    2024年02月16日
    浏览(46)
  • element-ui的表单正则校验

    🤯🤯💦💦💦竹怜新雨后,山爱夕阳时, 绵绵细雨, 也许会让嘈杂的窗外焕然一新吧! 基本步骤-共三步 定义验证规则。data()中按格式定义规则 在模板上做属性配置来应用规则(三个配置) 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单项(

    2023年04月12日
    浏览(42)
  • element-ui表单自定义校验

    1.问题描述 项目开发过程中,遇到表单校验,这次的校验规则比较严,element-ui表单自带的校验完全解决不了问题。 2.解决方法 使用elementui表单校验中的自定义校验,validUsername是自定义的校验方法名称 2.1 定义表单校验: 2.2 自定义校验方法: 注意:方法中一定义要返回call

    2024年02月11日
    浏览(45)
  • Element-UI form表单 resetFields() 重置表单无效问题

    原因: resetFields() 是将表单项重置为初始值,而这个初始值是在 Vue mounted 时赋值上去的,如果在这之前对表单进行了赋值,则初始值会改变,那么后面调用 resetFields() 则不会生效(不会是定义时的空值) 方法1:将赋值操作定义在 this.$nextTick() 中(保证了初始值不被修改)

    2024年02月11日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包