nuxt 使用 Vue JSON Schema Form

当我们需要对一些 结构复杂,或内容较多的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 即可。


一些常用数据处理

1,为下拉框动态添加数据

官方提供的方法如下。

  created() {
      setTimeout(() => {
          Object.assign(this.uiSchema.name, {
              'ui:enumOptions': [{value: '2',  label: '小猫'},{value: '3',  label: '小狗'}]
          })
      }, 3000);
  }

在实际的开发中,想要在一个可以自增的表单中添加数据。可以如下操作
表单效果:
image.png

获取数据:

      Object.assign(this.uiSchema.platform.crosspromotion.games.items.name, {
        "ui:enumOptions": this.gameItem,
      });

其中,itemsVUE JSON Schema Form 提供给每个数组对象 固定的一个字段。

2,下拉框相关基础功能

2.1,可搜索功能
由于JSON Schema 的UI 框架 是element, 所以,element UI 上一些功能,这里也是可以使用的。
对于 element UI上提供的放, 可以在JSON 表单中 ui:属性 的方式添加:
例如下拉框的可搜索功能:
"ui:filterable": true, 即可。 filterable就是 element UI 提供的属性。
2.1,表单值
官方提的是在 enum 设置 value, enumNames设置label,会造成JSON表单特别长,可以使用 ui:enumOptions 直接进行 value 和 label的设置。

"type": "string",
"ui:widget": "SelectWidget",
"ui:enumOptions": [
  {
    "label": "顶部",
    "value": "top"
  },
  {
    "label": "底部",
    "value": "bottom"
  }
],

3,数据联动

3.1,B数据根据A选择的结果进行数据填充
具体需求如图所示:
image.png
当A表单为 false时 :
image.png
官方提供on-change 的方法,会在每一次数据数据更新之后,调用。
由于,我们需要对表单数据进行更改,会造成方法死循环。
image.png
于是,改用vue 的 watch 属性,代码如下:

  watch: {
    "formData.platform": {
      handler(newValue) {
        let select = [];
        this.formData.tempArray = [];
        if (newValue.ironsource.enable) {
          select = ["a", "b", "c", "d"];
          for (const i in select) {
            this.formData.tempArray.push(select[i]);
          }
        }
        if (newValue.flat.enable) {
          this.formData.tempArray.push("e");
        }
      },
      deep: true,
    },
  },

3.2,B表单根据A选择的结果进行隐藏,展示。

uiSchema: {
   platform: {
      bform: {
        "ui:hidden": "{{rootFormData.platform.aform.enable === false }}",
      },
   }
}

知道的越多,不知道的也就越多。

26 声望
4 粉丝
0 条评论
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:

A_Ghost阅读 668

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue中style scope深度访问新方式(:deep())
1、&gt;&gt;&gt;如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析&gt;&gt;&gt;,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏