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;
}
}