1、安装插件
npm install vue-json-editor --save
2、使用
1 <div class = "routeManagement">
2 <vue-json-editor 3 v-model="prersonForm.data"
4 :showBtns="true" // 是否显示保存按钮
5 :mode="'code'" //默认显示编辑模式
6 lang="zh" // 显示中文，默认英文
7 :key="keys"
8 @json-change="onJsonChange"
9 @json-save="onJsonSave"/>
10 </div>
11
12 <script>
13 import vueJsonEditor from 'vue-json-editor'; 14 data(){ 15 return { 16 prersonForm: { 17 formModule: 1, 18 data: null, 19 }, 20 } 21 } 22 components: { 23 vueJsonEditor 24 }, 25
26 methods: { 27 onJsonChange (value) { 28 console.log('value:', value); 29 }, 30 onJsonSave (value) { 31 console.log('value:', value); 32 }, 33 onError (value) { 34 console.log('value:', value); 35 } 36 } 37 </script>
显示效果如下：
使用就是如上使用就可以了
在做的时候，遇到一个小问题就是，我是有几个地方修改的时候，都会调用到这个JSON编辑器，每次传进来的内容都不一样，不修改的时候，点保存，onJsonSave传进来的value永远是第一次传进来的内容。我的理解是，编辑器没有重新初始内容导致的。所在我就加了一个key，如果key有变化的时候就重新初始一次，这样子就保证了每次onJsonSave传进来的value的内容都是正确的。
样式，可以自行调整
.routeManagement{
width:98%;
margin:16px auto;
/deep/.jsoneditor-vue{
height:500px;
}
/deep/.json-save-btn{
margin-top: 10px;
cursor: pointer;
width: 100px;
line-height: 30px;
font-size: 14px;
}
}