JSON表格 - 更多表格. 减去代码

闪烁眼中复杂的窗体

贾森 表格通过利用JSON,JSON Schema和Javascript的能力,消除了用手书写全版表格的烦琐任务.

Vue 香草制作人

这是JSON Forms Vue Vanilla 渲染器软件包,它提供了基于 HTML5 的渲染器集 JSON 表单。 。 。 .

JSON 表单 Vue 种子应用

看我们的 JSON 表单 Vue 种子仓库 尽快开始.

快开始

安装 JSON 格式核心、 Vue 和 Vue Vanilla 渲染器

npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla

将软件包添加到 vue.config.js 文件 :

module.exports = {
  transpileDependencies: [
    '@jsonforms/core',
    '@jsonforms/vue',
    '@jsonforms/vue-vanilla',
  ],
};

使用 json-forms 用于您要渲染和移交渲染器集的每个窗体的组件.

<script>
import { JsonForms } from '@jsonforms/vue';
import { vanillaRenderers } from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

const renderers = [
  ...vanillaRenderers,
  // here you can add custom renderers
];

export default defineComponent({
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(renderers),

      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>

假設"香草放送"完全不应用CSS. 很快的开始,你可以使用 @jsonforms/vue-vanilla/vanilla.css。 。 。 .

关于JSON表格如何配置的更多信息,请参见 读取 @jsonforms/vue。 。 。 .

样式

每个已渲染的 HTML 元素指定一个 CSS 类,用于样式 . 这一过程也可以被定制,以便每个元素宣布用户指定的CSS类. 因此,JSON Forms Vue Vanilla可以很容易地与任何CSS唯一的UI框架相融合.

您可以在“ ” 中找到默认的 CSS 类默认样式.ts。 。 。 .

做你自己的课 provide 他们作为 styles。 。 。 . 这些 styles 替换 defaultStyles。 。 。 . 狦稱 defaultStyles 或把它们与你自己的课结合起来,你需要这样做在程序上,例如:

<script>
import { JsonForms } from '@jsonforms/vue';
import {
  defaultStyles,
  mergeStyles,
  vanillaRenderers,
} from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

// mergeStyles combines all classes from both styles definitions
const myStyles = mergeStyles(defaultStyles, {
  control: { root: 'my-control' },
});

export default defineComponent({
  name: 'app',
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(vanillaRenderers),
      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
  provide() {
    return {
      styles: myStyles,
    };
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>

您也可以通过 : options.styles 属性. 在此指定的属性覆盖相应的属性 defaultStyles 或提供 styles。 。 。 . 此处未指定的属性返回到任意 defaultStyles 或提供 styles。 。 。 .

{
  "type": "Control",
  "scope": "#/properties/name",
  "options": {
    "styles": {
      "control": {
        "root": "my-control-root"
      }
    }
  }
}

许可证

JSONForms项目根据麻省理工学院许可证获得许可. 见 自由文件 更多信息.

路线图

我们的行进图已经公布 这里。 。 。 .

移徙

看我们的 移徙指南 当更新 JSON 表格时.