vue中简单封装自己的json-editor

最新推荐文章于 2024-08-21 08:36:40 发布

Juice-Dreamer

最新推荐文章于 2024-08-21 08:36:40 发布

阅读量1.1k

点赞数 1

分类专栏： Vue系列文章标签： vue json

本文链接：https://blog.csdn.net/qq_39811414/article/details/110842464

版权

本文介绍了在Vue项目中基于vue-json-editor封装自己的JSON编辑器。详细讨论了前言、接口设计、使用方法，以及遇到的问题和解决方案，如通过异步获取jsonSchema后再渲染以避免验证问题。同时提供了运行截图和源码下载链接。

摘要由CSDN通过智能技术生成

在项目开发中，用到了一个json editor，因为是vue需要用到，于是借鉴了vue-json-editor源码进行编写了一个符合自己业务的json-editor。

name	含义	默认值
width	组件的宽度	‘100%’
height	组件的高度	‘500px’
mode	编辑json的格式(tree、view、form)	tree
modes	可视化json的格式(tree、code、orm、text、view)	[‘tree’, ‘code’, ‘form’, ‘text’, ‘view’]
json	组件展示的json数据	{}
schema	json数据的规则
expandedOnStart	json数据是否默认展开	true
json-save	子组件通过验证后的获取到json的方法

说明：我的保存按钮会根据schema来决定是否可用，如果验证通过了，那么就会向父组件发送事件。

有个小问题是：我之所以加v-if，是因为

关注

专栏目录