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.js指令v-model使用方法
这篇文章主要为大家详细介绍了vue.js指令v-model的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Vue2中项目打包优化的方法详解
这篇文章主要为大家详细介绍了vue2项目的打包优化方法,包括减少打包代码体积和提升编译时间等,感兴趣的小伙伴可以跟随小编一起学习一下
2025-02-02
Vue2实现未登录拦截页面功能的基本步骤和示例代码
在Vue 2中实现未登录拦截页面功能,通常可以通过路由守卫和全局前置守卫来完成,以下是一个基本的实现步骤和示例代码,帮助你创建一个简单的未登录拦截逻辑,需要的朋友可以参考下
2024-04-04
Vue项目报错:parseComponent问题及解决
这篇文章主要介绍了Vue项目报错:parseComponent问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
iview在vue-cli3如何按需加载的方法
这篇文章主要介绍了iview在vue-cli3如何按需加载的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue3+Typescript实现路由标签页和面包屑功能
在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景，这篇文章主要介绍了vue3+Typescript实现路由标签页和面包屑,需要的朋友可以参考下
2023-05-05
vue实现树形结构样式和功能的实例代码
这篇文章主要介绍了vue树形结构样式和功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
Vue生成随机卡密并绑定到表单输入框的实现技巧
在现代Web应用中,随机生成验证码、卡密等是一项常见需求,对于开发人员来说,如何在表单中快速生成一个符合格式的随机卡密,并与其他表单字段一同提交,是一个常见的场景,本篇文章将详细介绍如何在Vue.js框架中实现一个随机卡密生成功能,需要的朋友可以参考下
2024-11-11
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
浅谈使用mpvue开发小程序需要注意和了解的知识点
这篇文章主要介绍了浅谈使用mpvue开发小程序需要注意和了解的知识点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05

Vue3集成json-editor-vue3的代码实现

安装依赖

引入

具体模块

代码实现

完整代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具