我这里使用的是vue3,vue2的话建议看官方文档https://github.com/dirkliu/vue-json-editor
安装:npm install vue-json-editor --save
template>
<div>
<vueJsonEditor
:value="caseForm['parameters']['value']"
:show-btns="false"
:mode="'text'"
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave"
@has-error="onError"
></vueJsonEditor>
</div>
</template>
<script lang="ts">
import vueJsonEditor from 'vue-json-editor'
export default defineComponent({
setup() {
const onJsonChange = (value: any) => {
onJsonSave(value);
};
const onJsonError = (value: any) => {
//json参数格式错误时执行的方法
};
const onJsonSave = (value: any) => {
state.caseForm['parameters']['value'] = value;
};
return {
onJsonSave,
onJsonError,
onJsonChange,
}
}
})
</script>
备注:这里如果mode的值使用的是code的话输入中文的话,会有重影,而且输入中文会有问题,故使用text这个值,如果使用这个还不满意,建议直接和需求人说:这个需求我做不了【手动滑稽】