安装依赖

npm install json-editor-vue3 --save

引入

main.js

import "jsoneditor";

具体模块

import JsonEditorVue from 'json-editor-vue3';

代码实现

<json-editor-vue ref="jsonEditor" class="editor" v-model="state.addFormField.powerTypes" @keyup="jsonValidate" />

完整代码

<template><div><div class="card-wrap" style="padding: 0 12px;"><el-form :model="state.queryParams" ref="queryRef" :inline="true" class="form-search-wrap"><el-form-item label="code"><el-input v-model="state.queryParams.code" clearable style="width: 240px" /></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="getList()">Search</el-button><el-button icon="Refresh" @click="resetSearchForm">Reset</el-button></el-form-item></el-form></div><div class="card-wrap" style="padding-bottom: 100px;"><div class="operation-wrap"><el-button type="primary" @click="handleEdit(null, 1)">Add</el-button><el-button type="danger" @click="batchRemove" >Remove</el-button></div><el-table :data="state.tableData"v-loading="state.loading"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column prop="code" label="Code"></el-table-column><el-table-column prop="value" label="Value"></el-table-column><el-table-column prop="i18n" label="I18n"></el-table-column><el-table-column label="Operation" align="center"><template #default="scope"><el-button type="primary" icon="Edit" @click="handleEdit(scope.row, 0)" circle /><el-button type="danger" icon="Delete" @click="remove(scope.row.id, 0)" circle /></template></el-table-column></el-table><div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="state.queryParams.page":page-sizes="[10, 20, 50, 100]":page-size="state.queryParams.size"layout="total, sizes, prev, pager, next, jumper":total="state.queryParams.total"></el-pagination></div></div><el-dialog :title="state.type?'add':'update'" v-model="state.dialogVisible" width="30%"  destroy-on-close @close='resetForm'><el-form ref="addForm" :rules="state.rules" :model="state.addFormField" label-width="100px"><el-form-item label="code" prop="code"><el-input v-model="state.addFormField.code" style="width: 80%;" ></el-input></el-form-item><el-form-item label="value" prop="value"><el-input v-model="state.addFormField.value" style="width: 80%;" ></el-input></el-form-item><el-form-item label="i18n" prop="i18n"><el-input v-model="state.addFormField.i18n" style="width: 80%;" ></el-input></el-form-item><el-form-item label="numberOfEngine" prop="numberOfEngine"><el-input v-model="state.addFormField.numberOfEngine" style="width: 80%;" ></el-input></el-form-item><el-form-item label="powerTypes" prop="powerTypes"><json-editor-vue ref="jsonEditor" class="editor" v-model="state.addFormField.powerTypes" @keyup="jsonValidate" /></el-form-item><el-form-item label="siebelCode" prop="siebelCode"><el-input v-model="state.addFormField.siebelCode" style="width: 80%;" ></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="state.dialogVisible = false">Cancel</el-button><el-button type="primary" @click="add">Confirm</el-button></span></template></el-dialog></div>
</template><script setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from '@/api/dic/common';
import JsonEditorVue from 'json-editor-vue3';const addForm = ref();
const jsonEditor = ref();
const moduleUrl = "boatType";
const state = reactive({multipleSelection: [],dialogVisible: false,jsonEditFlag: true,num: 1,loading: false,type: "add",tableData: [],addFormField: {id: "",code: "",value: "",i18n: "",numberOfEngine: "",powerTypes: "",siebelCode: "",},queryParams: {code: undefined,page: 1,size: 10,total: 0,},rules: {code: [{ required: "true", message: "code is required", trigger: ["change"] },],value: [{ required: "true", message: "value is required", trigger: ["change"] },],i18n: [{ required: "true", message: "i18n is required", trigger: ["change"] },],},
});async function jsonValidate () {if (jsonEditor.value) {const res = await jsonEditor.value.editor.validate();if(res.length != 0){state.jsonEditFlag = false;}else {state.jsonEditFlag = true;}}
}function handleSelectionChange(val) {state.multipleSelection = val
}function commonRemove(idList) {ElMessageBox.confirm('Are you sure to remove this data?').then(() => {api.remove({idList: idList}, moduleUrl).then((res) => {ElMessage.success("success");}).finally(() => {state.loading = false;});setTimeout(() => {getList();}, 300);})
}function remove(id){let idList = [];idList.push(id)commonRemove(idList);
}function batchRemove() {if(state.multipleSelection == undefined || state.multipleSelection.length <= 0){ElMessage.warning("Please select checkbox");return;}let idList = [];state.multipleSelection.forEach((value, index) => {idList.push(value.id)});commonRemove(idList);
}function handleEdit(row, type){if(row){state.addFormField = JSON.parse(JSON.stringify(row));}if (type) {state.type = true;} else{state.type = false;}state.dialogVisible = true;
}function resetForm(){state.addFormField = {id: undefined,code: undefined,value: undefined,i18n: undefined,}
}function resetSearchForm(){state.queryParams.code = undefined;
}function add(){addForm.value.validate((valid) => {if(!state.jsonEditFlag){ElMessage.error("JSON input wrong format");return ;}if (valid) {let id = state.addFormField.id;if (id) {api.update(state.addFormField, moduleUrl).then((res) => {ElMessage.success("success");}).finally(() => {state.loading = false;});}else{api.add(state.addFormField, moduleUrl).then((res) => {ElMessage.success("success");}).finally(() => {state.loading = false;});}resetForm();state.dialogVisible = false;setTimeout(() => {getList();}, 200);} else {return false;}});
}function getList(){state.loading = true;let data = {};if(state.queryParams){data = JSON.stringify(state.queryParams).replace(/:/g, '=').replace(/,/g, '&').replace(/{/g, '?').replace(/}/g, '').replace(/"/g, '');}api.getList(data, moduleUrl).then((res) => {state.tableData = res.items;state.queryParams.page = res.page;state.queryParams.size = res.size;state.queryParams.total = res.total;}).finally(() => {state.loading = false;});
}function handleSizeChange(val){state.queryParams.size = val;getList();
}function handleCurrentChange(val){state.queryParams.page = val;getList();
}getList();
</script>
<style scoped >
/deep/ .el-dialog{width: 50%;
}
/deep/ .el-form-item--default{margin-left: 30px;
}
.pagination {background: #fff;padding: 20px 10px 0;display: flex;justify-content: flex-end;box-sizing: border-box;
}
.card-wrap{padding: 15px 20px 20px 20px;border-radius: 4px;border: 1px solid #e6ebf5;background-color: #fff;overflow: hidden;color: #303133;-webkit-transition: .3s;transition: .3s;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);margin: 10px;
}
.operation-wrap{margin: 0 0 16px 0;
}
.form-search-wrap{margin: 10px 0 0 12px;
}
</style>