vue实现动态表单动态渲染组件的方式(2)

本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下

思路

  • 先把所有可能出现的表单/组件写在主页面
  • 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配
  • 根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件
  • 在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染

案例

//主页面
<template>
    <el-form :model="formData">
        //把从后端取到的数据传给子组件,动态生成slot插槽列表
      <FormItemSlot :formItemList="formItemList">
        <el-form-item label="开关" slot="switch-component">
          <el-switch
            v-model="formData.checked"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="名字" slot="input-component">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="角色" slot="select-component">
          <el-select v-model="formData.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </FormItemSlot>
    </el-form>
</template>
<script>
    improt 引入slot列表子组件 FromItemSlot(下面有)
    export default {
        data() {
      return {             
        formItemList: [
          { type: 'switch-component', require: true, label: '开关', key: 'isOpen' },
          { type: 'input-component', require: true, label: '姓名', key: 'name' },
          { type: 'select-component', require: true, label: '角色', key: 'role' },
        ],
        formData: {

        },
        options: [
          {
            value: '1',
            label: '李世民'
          },
          {
            value: '2',
            label: '嬴政'
          },
          {
            value: '3',
            label: '刘邦'
          },
          {
            value: '4',
            label: '项羽'
          },
          {
            value: '5',
            label: '范蠡'
          }
        ],
      }
    },
    components: {
      FormItemSlot
    },
}
</script>
//FormItemSlot.vue  插槽列表
<template>
  <div class="slot-wrap">
    <slot v-for="(item, index) in formItemList" :name="item.type"></slot>
  </div>
</template>

<script>
  export default {
    name: 'FormItemSlot',
    props: {
      formItemList: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped>

</style>

以上数据会直接收集到formData中,此方式的好处在于表单数据都在一个页面,方便数据处理.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu

  • Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

  • vue element动态渲染、移除表单并添加验证的实现

    又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也

  • vue实现动态表单动态渲染组件的方式(1)

    vue 实现动态表单/动态渲染组件的方式(一),供大家参考,具体内容如下 思路 先写好各个可能会出现的表单或者自定义的组件,引入. 此时后端可能会给到一个对象型数组,每个对象有要渲染组件的一个类型标识 利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件 在利用组件的数据通信去收集各个子组件的数据 实现demo 三个表单组件,用了element-ui 此处用了自定义组件的v-model来收集子组件的数据 //InputComponent.vue  要渲染的子组件 <

  • Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成

  • vue实现动态表单动态渲染组件的方式(2)

    本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下 思路 先把所有可能出现的表单/组件写在主页面 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配 根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件 在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染 案例 //主页面 <template>     <el-

  • 详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

  • vue构建动态表单的方法示例

    概述 后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单.并且能够在外部得到渲染出来的表单的数据,可以对表单进行重置操作.我结合element ui的控件的下拉框,输入框,时间选择控件和vue-treeselect,做了一个动态表单. v-model的理解 先简单讲一下vue-model是怎么玩的.其实vue-model相当于给表单元素传递一个value,外部监听input事件.所以我们自己封装表单组件的时候也是可以传递一个valu

  • 使用Vue生成动态表单

    开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加.修改.我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴. 于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型.表单得字段.以及对表单得管理.后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况. 数据接口设计 表单类型的接口就不用说了,这个比较简单.我跟后端约定了一个预备创建

  • vue 动态表单开发方法案例详解

    本文实例讲述了vue 动态表单开发方法.分享给大家供大家参考,具体如下: 概要 动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的.主要的思路是,在后端生成vue的模板,前端通过ajax的方式加载后端的表单模板,权限数据和表单数据,在前端使用vue进行构建出来. 表单渲染过程. 实现步骤 1.在前端开发表单组件,比如用户组件,文本输入组件. 在平台中我们可以看到我们开发的组件. 组件的开发在第三篇有介绍. 我们定义的组件和后

  • Vue动态表单的应用详解

    概述   后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单.并且能够在外部得到渲染出来的表单数据,从而做一个入库操作. v-model的理解   vue-model相当于给表单元素传递一个value,外部监听input事件.所以我们自己封装表单组件的时候也是可以传递一个value值,监听input事件获取输入的值. <input type="text" v-model="thing"> &

  • 策略模式实现 Vue 动态表单验证的方法

    策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的 实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾

  • vue2实现封装动态表单组件

    目录 封装组件注意点 动态表单动态控制的是什么? 动态表单封装 风格一 风格二 (推荐优先采用此风格) 封装组件注意点 不要为了封装而封装 只封装不变的部分,将变化的部分通过slot或其他方式,暴露出去,交给调用者实现 为了提供封装组件的复用率,优先封装为UI组件,而不是封装为业务组件(即:封装组件内部使用到的数据,都通过prop获取,而不是直接通过ajax请求或vuex中获取) 动态表单动态控制的是什么? 已知的需要动态控制的场景: 在A界面显示:A, B, C三个表单项,B界面显示:A,B,

随机推荐