nuxt 使用 Vue JSON Schema Form

A_Ghost

当我们需要对一些 结构复杂,或内容较多的JSON 进行修改配置的时候,极易容易出错。于是,就想着是否能通过表单形式进行修改,保存。最后,发现了几个JSON 编辑器。
1,Vue JSON Schema Form

2,Vue-Json-Edit

3,json-editor

这里采用的是,第一个 Vue JSON Schema Form 插件。下面,就介绍一下,在nuxt 中,如何使用。

1,安装

该命令是 安装 vue2 + elementUI 版本的。其他版本的安装命令可以查阅官网。
npm install --save @lljj/vue-json-schema-form

2,使用

2.1 在 plugins 下新增 json-schema.js 文件,调用组件

import Vue from "vue";
import VueForm from "@lljj/vue-json-schema-form";
Vue.component("VueForm", VueForm);

2.2,在所需的地方,使用 VueForm 组件

<template>
  <div>
    <VueForm
      v-model="formData"
      :schema="config.schema"
      :form-props="{
        layoutColumn: 2,
      }"
       @on-submit="handlerSubmit"
       @on-cancel="handleCancel"
    >
    </VueForm>
  </div>
</template>
<script>
import config from "@/config/config_form_schema";
export default {
  data() {
    return {
      config,
      formData: {},
    };
  },

  methods: {
    handleCancel(){
      // 取消操作。
    },
    handlerSubmit() {
      // 提交操作。
      console.log('formData结果:',this.formData)
    },
  },
};
</script>

当需要处理复杂JSON文件时,可以采用导入的方式,赋值给schema
schema 的格式编写,可参考:配置 schema JSON Schema 规范

2.3,表单输出。
2.3.1,具体的输出结果可以在 官方提供的案例链接 里查看 formData 的内容。
2.3.2,formData 的输出是对象。
2.3.3,在实际的开发中,只要处理 formData 即可。

阅读 76
10 声望
0 粉丝
0 条评论
10 声望
0 粉丝
文章目录
宣传栏