Vue3集成json-editor-vue3的代码实现
更新时间：2023年11月15日 10:21:25 作者：宁漂打工仔
这篇文章主要介绍了Vue3集成json-editor-vue3的代码实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
安装依赖
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>到此这篇关于Vue3集成json-editor-vue3的文章就介绍到这了,更多相关Vue3集成json-editor-vue3内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue yaml代码编辑器组件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。这篇文章主要介绍了vue2.0 实现导航守卫（路由守卫）的相关知识,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue3.0数据响应式原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
vue3使用Element-plus的el-pagination分页组件时无法显示中文
本文主要介绍了vue3使用Element-plus的el-pagination分页组件时无法显示中文,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章主要给大家介绍了关于如何基于Vue3封装一个好用的Websocket的相关资料,在Vue3中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue实现电梯样式锚点导航效果流程，这种导航效果广泛应用于商城点餐购物情景，文中通过示例代码介绍的很详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-05-05
这篇文章主要介绍了vue-router子路由的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
最新评论