?實現效果：
借助插件json-editor-vue3實現效果如圖一，如果嫌丑可以通過類名改一下樣式如圖二。
?
實現過程：
安裝插件：npm install json-editor-vue3
文檔鏈接：GitCode - 開發者的代碼家園
<script setup name="dataPreView">
import JsonEditorVue from 'json-editor-vue3';
// 數據是否在加載中
let dataLoading = $ref(false);
let dataSql = $ref('');
// json配置
const couldView = $ref(['tree', 'code', 'form', 'view', 'text']);
// json修改
const updateModelValue = (val) => {console.log(val, '修改了值');
};
</script><template><div v-loading="dataLoading"><JsonEditorVuev-model="dataSql"class="myJsonEditor"style="height: 580px":modeList="couldView"currentMode="code"@update:model-value="updateModelValue"></JsonEditorVue></div>
</template>
<style lang="less">
.myJsonEditor {.jsoneditor-menu > .jsoneditor-modes > button,.jsoneditor-menu > button {background-color: #6284ff;}.jsoneditor-menu > .jsoneditor-modes > button:hover,.jsoneditor-menu > button:hover {background-color: #6284ff;}.jsoneditor-menu > .jsoneditor-modes > button:focus,.jsoneditor-menu > button:focus {background-color: #6284ff;}.jsoneditor-menu {background-color: #ecf0fd;border-bottom: none;}.jsoneditor {border: 1px solid #dae3ff;}.ace-jsoneditor .ace_gutter {background-color: #f7f7f7;}.jsoneditor-statusbar {background-color: #f7f7f7;border-top: 1px solid #dae3ff;}.full-screen {background-color: #6284ff;}.jsoneditor-poweredBy {color: #6284ff;}.ace_gutter-cell.ace_error,.ace_icon.ace_error,.ace_icon.ace_error_fold {background-image: url(../imgs/task/inputClose.png);background-size: 14px 14px;}.ace-jsoneditor .ace_marker-layer .ace_active-line {background: #fafafa;}.jsoneditor-statusbar {display: none;}
}
</style>
參考文檔：
json-editor-vue3 (Json字段編輯器 )-CSDN博客?
【前端】Vue項目中 JSON 編輯器的使用_vue json 編輯器-CSDN博客
?
)
數據)
