通过JSON渲染表单

本文将介绍如何导出 JSON 数据和回显表单。

生成JSON数据

使用 api.toJson 方法可以将当前表单的数据和配置导出为 JSON 格式。这在需要保存表单状态或进行数据交换时非常有用。

商品名称

标签

好用快速高效全能

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
    <ElButton @click="toJson">生成json</ElButton>
    <br/>
    <div>
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      text: '',
      options: {
        submitBtn: false,
      },
      rule: [
        {
          type: 'input',
          field: 'goods_name',
          title: '商品名称',
          value: 'form-create'
        },
        {
          type: 'checkbox',
          field: 'label',
          title: '标签',
          value: [0, 1, 2, 3],
          options: [
            {label: '好用', value: 0},
            {label: '快速', value: 1},
            {label: '高效', value: 2},
            {label: '全能', value: 3},
          ]
        }
      ]
    }
  },
  methods: {
    toJson() {
      this.text = 'json: ' + this.fApi.toJson()
    }
  }
}
</script>

JSON数据回显

通过 formCreate.parseJson 方法可以将 JSON 数据解析为表单配置，从而回显表单状态。此方法适用于从存储或接口获取 JSON 数据并重新渲染表单的场景。

商品名称

标签

好用快速高效全能

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
import formCreate from "@form-create/element-ui"

export default {
  data() {
    return {
      fApi: {},
      json: '[{"type":"input","field":"goods_name","title":"商品名称","value":"form-create","props":{},"on":{},"options":[],"children":[],"hidden":false,"display":true},{"type":"checkbox","field":"label","title":"标签","value":[0,1,2,3],"options":[{"label":"好用","value":0},{"label":"快速","value":1},{"label":"高效","value":2},{"label":"全能","value":3}],"props":{},"on":{},"children":[],"hidden":false,"display":true}]',
      options: {
        submitBtn: false,
      },
      rule: []
    }
  },
  mounted() {
    this.rule = formCreate.parseJson(this.json);
  }
}
</script>