VUE使用form-create利用json生成表单

最新推荐文章于 2025-03-10 14:16:27 发布

Sawyerswt

最新推荐文章于 2025-03-10 14:16:27 发布

阅读量1.4k

点赞数

分类专栏： json 文章标签： vue

本文链接：https://blog.csdn.net/qq_31493411/article/details/105655971

版权

json 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过Form-create和iView库在Vue项目中快速生成和配置动态表单。从安装依赖开始，详细展示了在main.js中进行配置的过程，包括Vue插件的引入和全局组件注册。并通过JSON数据生成表单，提供了代码示例和最终的表单效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装form-create

cnpm i @form-create/iview

在这里插入图片描述

配置main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import http from './http';
import store from './store/index';
import router from './router/index';
import Root from './Root.vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreate from '@form-create/iview'


// 引入公共样式表
import 'normalize.css';
import 'animate.css';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 引入echarts主模块（基础模块）
import ECharts from 'vue-echarts/components/ECharts.vue'

// 引入需要的echarts如表
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';

// 引入需要的 echarts的交互组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/toolbox';

import 'src/assets/styles/variable.scss';
import 'src/assets/styles/base.scss';
import 'src/assets/styles/common.scss';
import 'src/assets/styles/iconfont.css';

Vue.use(ElementUI);
Vue.use(iView);
Vue.use(formCreate)
Vue.component('chart', ECharts);

Vue.config.productionTip = false;



/* eslint-disable no-new */

// 将axios挂载到prototype上，在组件中可以直接使用this.axios访问
Vue.prototype.axios = http;

new Vue({
  el: '#app',
  store,
  router,
  template: '<Root/>',
  components: { Root }
});

利用json生成表单：


<template>
  <form-create v-model='$f' :rule='rule' @on-submit='onSubmit'></form-create>
</template>

<script>
export default {
  data() {
    return {
     
      $f: {},
      
      rule: [
        {
          type: 'input',
          field: 'goods_name',
          title: '商品名称'
        },
        {
          type: 'datePicker',
          field: 'created_at',
          title: '创建时间'
        }
      ]
    };
  },
  methods: {
    onSubmit(formData) {
     
    }
  }
};
</script>

效果图如下：
在这里插入图片描述