Vue+ElementUI实现表单动态渲染、可视化配置的方法-程序员宅基地

技术标签: element ui html 渲染  

这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下

动态渲染就是有一个异步的数据,大概长这样:{

"inline": true,

"labelPosition": "right",

"labelWidth": "",

"size": "small",

"statusIcon": true,

"formItemList": [

{

"type": "input",

"label": "姓名",

"disable": false,

"readonly": false,

"value": "",

"placeholder": "请输入姓名",

"rules": [],

"key": "name",

"subtype": "text"

},

{

"type": "radio",

"label": "性别",

"value": "",

"button": false,

"border": true,

"rules": [],

"key": "gender",

"options": [

{

"value": "1",

"label": "男",

"disabled": false

},

{

"value": "0",

"label": "女",

"disabled": false

}

]

}

]

}

然后你需要把这个json渲染成这样:

08e31855d78b49536d5019ae32dccd2e.png

最后提交表单的数据长这样:{

"name": "Genji",

"gender": "1"

}

然后我们目标就是封装这样一个组件:

实现

开始之前,你需要知道 v-model 的工作原理 :

这不过是以下示例的语法糖:

:value="something"

@input="something = $event.target.value">

了解这些后,我们再来一步一步实现这个组件。

首先,把配置转发到 el-form :

class="

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39524741/article/details/118481458

智能推荐

Mask-RCNN出现的问题_valueerror: dimension 1 in both shapes must be equ-程序员宅基地

文章浏览阅读630次。出现问题:ValueError: Dimension 1 in both shapes must be equal, but are 28 and 324. Shapes are [1024,28] and [1024,324]. for ‘Assign_682’ (op: ‘Assign’) with input shapes: [1024,28], [1024,324].这是由于维度的原因不同所造成。修改了train.py 的第60行成功!如果还未成功,看几个地方是否一样:1 train._valueerror: dimension 1 in both shapes must be equal, but are 324 and 12. sh

将Ajax请求返回的json数据,转换成json对象-程序员宅基地

文章浏览阅读1.1w次。var json = eval("("+data+")");//将json类型字符串转换为json对象注:https://www.cnblogs.com/yuxiaona/p/5853732.html

线性空间(也叫向量空间)、线性运算_线性空间定义-程序员宅基地

文章浏览阅读793次,点赞7次,收藏9次。线性空间(也叫向量空间)、线性运算_线性空间定义

pychram中更换pip源_pycharm更换pip源-程序员宅基地

文章浏览阅读1.1k次。2、pip config set global.index-url http://mirrors.aliyun.com/pypi/simple/ #修改配置文件。原本的pip源一般为国外源,在下载第三方库的速度很慢,更改pip源可以快速提高下载速度。清华大学:https://pypi.tuna.tsinghua.edu.cn/simple。阿里云:http://mirrors.aliyun.com/pypi/simple。豆瓣:http://pypi.douban.com/simple。_pycharm更换pip源

vue项目中(vue-cli3)代理配置不成功 及 axios的 baseUrl 设置无效问题_axios加上baseurl反向代理就不生效-程序员宅基地

文章浏览阅读1.3w次,点赞9次,收藏35次。最近开发项目时配置代理过程中遇到一个非常低级的错误,导致配置完代理后,项目运行请求接口一直是404;并同时因为这个低级错误,自己对前端vue项目的代理配置又混乱,直至发现问题后才对代理配置清晰明了起来。本文简单记录问题解决方式及自己对vue项目中的代理配置一点小理解,避免日后再次踩坑。vue项目中涉及的文件简单描述:1、该项目的后台的服务地址为:http://10.10.10.10/aa2、现在请求一个后台的验证码接口为: /code/img3、vue项目中环境配置(.env.developme._axios加上baseurl反向代理就不生效

mybatis报错:org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exception-程序员宅基地

文章浏览阅读1.1w次。今日Mybatis执行一个 select 命令时出现错误,mybatis报错:targetException:org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException:### Error querying databas..._mybatissystemexception: nested exception is org.apache.ibatis.exceptions.per

随便推点

python中kmeans求到类中心的平均距离_k-means算法python实现-程序员宅基地

文章浏览阅读3.8k次。1.k-means算法的思想k-means算法是一种非监督学习方式,没有目标值,是一种聚类算法,因此要把数据划分成k个类别,那么一般k是知道的。那么假设k=3,聚类过程如下:随机在数据当中抽取三个样本,当做三个类别的中心点(k1,k2,k3);计算其余点(除3个中心点之外的点)到这三个中心点的距离,每一个样本应该有三个距离(a,b,c),然后选出与自己距离最近的中心点作为自己的标记,形成三个簇群;..._kmeans 计算类内平均距离

CSS Material+Icons 本地下载使用 国内解决方案_material icons 无法访问-程序员宅基地

文章浏览阅读1.7k次。前端使用<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">由于访问fonts.googleapis.com不稳定,所以经常出现图标访问不到_material icons 无法访问

java中使用mysql查询 条件中含有中文时查询不到结果_Mybatis使用MySQL模糊查询时输入中文检索不到结果怎么办...-程序员宅基地

文章浏览阅读647次。项目开发中,在做mybatis动态查询时,遇到了一个问题:mysql在进行like模糊查询时,输入英文可以正常检索出结果,但是输入中文后检索得到的结果为空。由于是使用get方式请求,所以为了确保中文不乱码,在控制台接收到请求参数后,对中文进行了一次编码。try {realname = new string(realname.getbytes("gbk"), "utf-8");} catch (un..._通过java查询mysql 模糊查询中文失效

MFC中线程间通信--主线程与子线程间的通信_mfc中主进程和子线程共享数据-程序员宅基地

文章浏览阅读1.8k次。第0步:声明一个线程、一个事件CWinThread* m_hThread; //接收线程的句柄HANDLE hStartEven; //第一步:定义自己的消息#define MY_MESSAGE WM_USER+100第二步:在发送消息的线程中//得到需要传输的数据 CString str; GetDlgItemText..._mfc中主进程和子线程共享数据

2020年第二届“网鼎杯”网络安全大赛 白虎组 部分题目Writeup_网鼎杯网络安全大赛比赛题目-程序员宅基地

文章浏览阅读7.7k次,点赞3次,收藏12次。2020年第二届“网鼎杯”网络安全大赛 白虎组 部分题目Writeup2020年网鼎杯白虎组赛题.zip下载https://download.csdn.net/download/jameswhite2417/124212670x00 签到操作内容:完成游戏,通过第7关,让提交队伍token值提交后获得flag通过qq截图,文字识别FLAG值:flag{f6e5************************3112}0x01 hidden操作内容:.._网鼎杯网络安全大赛比赛题目

使用Sonatype Nexus Repository Manager上传jar包_sonatype sonatype nexus repository manager 上传jar-程序员宅基地

文章浏览阅读2.1w次,点赞4次,收藏7次。使用Sonatype Nexus Repository ManagerOSS 3.14.0-04 上传jar包1、登录后台2、单击Browse server contents图标,打开预览页面,如下图所示:3、单击Browse菜单,选择组件库,打开上传组件页面,如下图所示:4、单击Upload按钮,打开上传页面,上传jar包,并填写相关信息,如下图所示:5、单击Up..._sonatype sonatype nexus repository manager 上传jar

推荐文章

热门文章

相关标签