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中，此方式的好处在于表单数据都在一个页面，方便数据处理.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue数据驱动表单渲染,轻松搞定form表单
form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成
-
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
-
Vue+ElementUI实现表单动态渲染、可视化配置的方法
动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "
-
vue实现动态表单动态渲染组件的方式(1)
vue 实现动态表单/动态渲染组件的方式(一),供大家参考,具体内容如下 思路 先写好各个可能会出现的表单或者自定义的组件,引入. 此时后端可能会给到一个对象型数组,每个对象有要渲染组件的一个类型标识 利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件 在利用组件的数据通信去收集各个子组件的数据 实现demo 三个表单组件,用了element-ui 此处用了自定义组件的v-model来收集子组件的数据 //InputComponent.vue 要渲染的子组件 <
-
vue element动态渲染、移除表单并添加验证的实现
又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也
-
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu
-
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,