1. 安装 vue-json-editor
npm install vue-json-editor --save
2. 可配置说明
v-model:bind the [json object];
:show-btns: boolean, show the save button, default: true ;
:expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false;
:mode: string, default: tree; 
:lang: string, default: en; 
@json-change: on json changed; 
@json-save: on json save; 
@has-error: on error;
3. 在 vue 中使用 vue-json-editor
<template>
  <div class = "routeManagement">
    <vue-json-editor 
      v-model="routeJson" :showBtns="true" lang="zh"
      @json-change="onJsonChange" @json-save = "onJsonSave"/>
  </div>
</template>

<script>
// 引入vue-json-editor模块
import vueJsonEditor from 'vue-json-editor'
export default {
  data () {
    return{
      // 可使用 JSON.parse() JSON.stringify() 转化 json 数据
      json: {
        msg: 'demo of jsoneditor'
      }
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    onJsonChange () { // 数据改变时触发
    },
    onJsonSave(){ // 点击保存触发
    }
  },
}
</script>

<style lang="scss" scoped>
.routeManagement{
  width:98%;
  margin:16px auto;
  /deep/.jsoneditor-vue{
    height:700px;
  }
  /deep/.json-save-btn{
    cursor: pointer;
  }
}
</style>
3. 效果图

在这里插入图片描述
推荐阅读: vue-json-views (一款 json 数据展示插件)

GitHub 加速计划 / js / json
19
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:4 个月前 )
f06604fc * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me> Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 1 个月前
d23291ba * add a ci step for Json_Diagnostic_Positions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * Update ci.cmake to address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typo in the comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typos in ci.cmake Signed-off-by: Harinath Nampally <harinath922@gmail.com> * invoke the new ci step from ubuntu.yml Signed-off-by: Harinath Nampally <harinath922@gmail.com> * issue4561 - use diagnostic positions for exceptions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci check failures for unit-diagnostic-postions.cpp Signed-off-by: Harinath Nampally <harinath922@gmail.com> * improvements based on review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix const correctness string Signed-off-by: Harinath Nampally <harinath922@gmail.com> * further refinements based on reviews Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add one more test case for full coverage Signed-off-by: Harinath Nampally <harinath922@gmail.com> * ci check fix - add const Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add unit tests for json_diagnostic_postions only Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_diagnostics Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_build_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> --------- Signed-off-by: Harinath Nampally <harinath922@gmail.com> 1 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐