认识

2023年02月18日

柏拉文

越努力，越幸运

提示

vue-json-schema-form 文档地址

一、安装

---

yarn add @lljj/vue-json-schema-form

二、用法

---

<template>
  <div class="">
    <vue-form v-model="formData" :formProps='formProps' :schema="schema">
      <div slot-scope="{ formData, formRefFn }">
        <el-button>取消</el-button>
        <el-button @click="submit(formData, formRefFn)" type="primary"
          >确定</el-button
        >
      </div>
    </vue-form>
    <el-button type="primary" @click='updateForm'>更新表单值</el-button>
  </div>
</template>


<script>
import VueForm from "@lljj/vue-json-schema-form";
export default {
  components: {
    VueForm,
  },
  data() {
    return {
      formData: {},
      formProp: {
        layoutColumn: 3, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效
        labelSuffix: '：', // label后缀
        labelPosition: 'top', // 表单域标签的位置
        labelWidth: 'auto', // 表单域标签的宽度，例如 '50px'
        size: 'mini'// 根据 ElementUI size 属性配置表单组件大小
      },
      schema: {},
    };
  },
  watch: {},
  mounted() {
    this.schema = {
      type: "object",
      required: [],
      properties: {
        like: {
          type: "object",
          required: [],
          properties: {
            music: {
              type: "object",
              required: [],
              properties: {
                rock: {
                  title: "音乐",
                  type: "string",
                  "ui:options": {
                    placeholder: "请输入",
                  },
                },
                love: {
                  title: "爱好",
                  type: "string",
                  "ui:options": {
                    placeholder: "请输入",
                  },
                },
              },
              "ui:order": ["rock", "love"],
            },
          },
          "ui:order": ["music"],
        },
      },
      "ui:order": ["like"],
    };
  },
  methods: {
    /**
     * @description: 提交表单
     */
    submit(formData, formRefFn) {
      console.log(formData);
      console.log(formRefFn);
    },
    /**
     * @description: 更新表单
     */
    updateForm() {
      this.formData.like.music.rock ='dj';
    },
  },
};
</script>