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渲染成这样：

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

"name": "Genji",

"gender": "1"

}

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

实现

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

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

:value="something"

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

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

首先，把配置转发到 el-form ：

class="

本文链接：https://blog.csdn.net/weixin_39524741/article/details/118481458

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

案例 | 蓝天智通：智办事助力“智慧校园”数智化管理，提升人效_蓝天数智(北京)科技有限公司-程序员宅基地

文章浏览阅读298次。01.客户介绍北京蓝天智通科技有限公司以物联网、虚拟化技术为基础，开发数智校园一体化管理系统，助力中国教学管理，实现数字化、可视化、智能化，打造数字孪生智慧校园，赋能教育行业，提高教育信息化和现代化，满足现代教育的需求。本次智慧校园项目，学校要求蓝天智通尽快交付使用，如此庞大复杂的系统对其开发团队提出了更严苛的要求：需求明确、快速开发、快速迭代、敏捷管理。作为蓝天智通数智化校园管理系统负责人大圣（花名），有二十多年互联网行业工作经验，并拥有阿里十几年的项目管理经验。一般的项目对他来说信手捏来_蓝天数智(北京)科技有限公司

Access是什么?-程序员宅基地

文章浏览阅读790次。一种使用简单的数据库软件，非常实用!是微软的一个小型数据库，是Microsoft office 中的一个组件.Access数据库能够进行数据表设计、可视查询设计、SQL查询语言、窗体设计、报表设计、Web页设计、宏设计和VBA程序设计，Access数据库作为面向对象的关系型数据库有着各种完善的功能创建access数据库首先打开我们的access程序，打开方法是单击开始..._access数据库是什么中的一个组件

【VMW】【Lunix】虚拟机ping出现From 192.168.1.10: icmp_seq=1 Redirect Network(New nexthop: 192.168.1.1)问题_来自 192.168.158.1 icmp_seq=2 redirect host(新的下一跳: 1-程序员宅基地

文章浏览阅读1.7k次。问题虚拟机中ping 百度或者网关，可以访问外网，连接正常但是会出现如下问题：root@yuxy:~# ping 192.168.23.1PING 192.168.23.1 (192.168.23.1) 56(84) bytes of data.From 192.168.23.213: icmp_seq=1 Redirect Network(New nexthop: 192.168.23.1)64 bytes from 192.168.23.1: icmp_seq=1 ttl=255 time=1_来自 192.168.158.1 icmp_seq=2 redirect host(新的下一跳: 192.168.158.136)

使用jmespath第三方模块提取json数据_jmespath取json的下标-程序员宅基地

文章浏览阅读4.7k次，点赞2次，收藏11次。在工作中经常需要查找json里面的某个key的值，如果json层级太长，使用字典自带的get方法，比较麻烦。这里演示一下第三方模块jmespath提取json键、值。pip install jmespath一、基本操作查询key对应的valueimport jmespathsource = {"a": "foo", "b": "bar", "c": "baz"}result = ..._jmespath取json的下标

汇编指令学习与总结CMP，TEST，JE，JNZ，JNE，LEA，MOVE，SUB，INC,DEC,ADD,MUL,DIV,JGE，JB ,CQD_汇编 je-程序员宅基地

文章浏览阅读3w次，点赞41次，收藏209次。所有的汇编都是我零基础逆向微信汇编的指令边玩边学（左边有机器码，自己可以查位置）如有不对的地方请指出注明:一些指令的英文单词，并非官方，只是为了好记好理解cmp【compare】指令进行比较两个操作数的大小例:cmp oprd1,oprd2为第一个操作减去第二个操作数,但不影响第两个操作数的值,它影响flag的CF，ZF，OF，AF，PF.66E9419E 66:833..._汇编 je

随便推点

python计算机毕设【附源码】医用仓库管理系统（django+mysql+论文）-程序员宅基地

文章浏览阅读518次，点赞6次，收藏10次。在数据库管理工具的选择上，使用了Navicat 11，这是一个用户友好且功能强大的数据库管理软件，它支持多种数据库系统，包括MySQL，并提供了图形化界面，使得数据库的管理和维护工作更加便捷。开发环境方面，我们选择了PyCharm作为主要的集成开发环境（IDE），它提供了丰富的Python开发工具和插件，支持Django框架，有助于提高开发效率和代码质量。此外，系统还可以记录操作人员的操作记录，便于追踪和审计。提高物资利用率：通过对医用物资的有效管理，可以避免物资的浪费和积压，提高物资利用率。

WIN10 LTSC 2019 安装新版Mircosoft Edge浏览器，解决无法安装问题_ltsc安装不了edge-程序员宅基地

文章浏览阅读1.8w次，点赞3次，收藏7次。WIN10 LSTC 2019 安装新版Mircosoft Edge浏览器，解决无法安装问题自己的笔记本一直使用WIN10 2019 LSTC(MSDN下载的)这一版本，因为这一版本真的太轻快简洁了，最近换电脑也是安装的Win10 LSTC 2019，但是安装完毕后在安装新版edge浏览器的时候提示系统版本低安装不了，自己的旧电脑就是LSTC却安装上，不知道什么原因，后来回想了一下旧电脑的使用过程并对新旧电脑的系统做了详细对比，发现是旧电脑上的系统补丁包版本高，而新电脑是刚安装的系统，补丁包还没有过升级_ltsc安装不了edge

Pluto SDR环境搭建libiio/libad9361-iio/GNU Radio/gr-iio(Ubuntu)_gnuradio 3.8.2 如何支持adalm pluto-sdr windows-程序员宅基地

文章浏览阅读784次，点赞11次，收藏10次。ADI前些年推出的ADALM-PLUTO SDR设备由于其轻便灵活的特点，外加价格相比于专业无线电相当实惠，受到了很多开源社区的欢迎，也诞生了许多的应用，如跟踪GPS、伪造GPS实现硬件级虚拟定位、电子钥匙重发攻击等（这些实际上HackRF做的更多）。同时对于学习通信的师生和对无线电感兴趣的业余玩家，也是个很不错的选择。国内购买纯原版Pluto SDR有些困难，但好在国内也有很多企业或团队基于某些成熟的SDR平台衍生出的性能更强，适用固件更多的软件无线电平台，价格也并非难以承受。_gnuradio 3.8.2 如何支持adalm pluto-sdr windows