脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3集成json-editor-vue3

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 实现点击展开收起动画效果

    vue.js 实现点击展开收起动画效果

    这篇文章主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    基于vue3.0.1beta搭建仿京东的电商H5项目

    这篇文章主要介绍了基于vue3.0.1beta搭建仿京东的电商H5项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue3项目中各个文件的作用详细介绍

    vue3项目中各个文件的作用详细介绍

    在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 详解Vue3-pinia状态管理

    详解Vue3-pinia状态管理

    这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下
    2022-08-08
  • Vue项目部署后提示刷新版本的实现代码

    Vue项目部署后提示刷新版本的实现代码

    这篇文章主要给大家介绍了关于Vue项目部署后提示刷新版本的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-06-06
  • Vue3之使用js实现动画示例解析

    Vue3之使用js实现动画示例解析

    这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • useEffect理解React、Vue设计理念的不同

    useEffect理解React、Vue设计理念的不同

    这篇文章主要为大家介绍了useEffect理解React、Vue设计理念的不同详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Vue渲染函数详解

    Vue渲染函数详解

    下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客

    Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程，感兴趣的朋友一起看看吧
    2018-04-04
  • Vue-路由导航菜单栏的高亮设置方法

    Vue-路由导航菜单栏的高亮设置方法

    下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论