通过Array来生成动态的表单 源码奉上

这是挖的坑:[vue3 根据json生成表单简单实现 主要是基于render函数和tsx - 掘金 (juejin.cn)] (juejin.cn/post/698278…)

前言:

1.ui框架是antd1.7.8(官网的那个版本)

2.vue版本是^2.6

3.写的不好,请多多包涵

功能介绍 1.根据数组渲染动态的表单

2.可以绑定事件

3.可以对数据进行操作

4.可以自己注册组件

5.可以配置不同的表单内容

6.动态插槽

未完成的功能

1.切换组件的表现形式

2.组件内部子组件套用

3.可以单独引用,单独注册,注册组件隔离(因为现在是全局注册的组件,可能不大对)

4.可以更换ui库

如果你的业务里面设计到了这个方面 你们可以看一下具体是怎么实现的 发出来就是集思广益或者说万一你现在正好就需要,然后又有很多业务定制要求,就可以看看 废话不多说上代码(git地址)

//找到这个最外面的index.js 然后use它就可以使用了 源码在上面 你们可以修修改改都没问题
import formCreate from '../../plugin/zformcreate/index.js'
Vue.use(formCreate)

演示示例

<!-- 事件监听  fileId-事件名 
    距离 a-change 就是 fileId是a的组件触发的change事件
    也可以直接在 对象里面写on:{事件名:事件} 这样的格式
-->
 <zFormCreate v-model="personModel" :formConfig="formConfig" :rule="rule"> </zFormCreate>
 
 export default {
      data() {
          return{
                 formConfig: {
                    labelCol: {span: 6},
                    wrapperCol: {
                      span: 18
                    },
                    labelAlign: 'left',
                    colonStatus: true,
                    labelWidth: 100
                  },
                  rule:[
                      {
                          type: 'input',//输入框
                          label: '输入框',
                          fileId: 'input',
                          value: '',
                          props: {},
                          span: 24
                      },
                      {
                          type: 'select',//下拉框
                          label: '下拉框',
                          fileId: 'select',
                          value: '',
                          options: [
                            {label: '否', value: '0'},
                            {label: '是', value: '1'}
                          ],
                          props: {},
                          span: 24
                      },
                      {
                          type: 'radio',//单选框
                          label: '单选框',
                          fileId: 'radio',
                          value: '',
                          options: [
                            {label: '否', value: '0'},
                            {label: '是', value: '1'}
                          ],
                          props: {},
                          span: 24
                      },
                      {
                          type: 'datePicker',//时间选择框
                          label: '时间选择框',
                          fileId: 'datePicker',
                          value: '2023-03-03',
                          props: {},
                          span: 24
                      }, 
                      {
                          type: 'switch',//开关
                          label: '开关',
                          fileId: 'switch',
                          value: false,
                          props: {},
                          span: 24
                      }, 
                      {
                          type: 'checkbox',//多选
                          label: '开关',
                          fileId: 'checkbox',
                          value: [],
                          props: {},
                          span: 24
                      },
                  ]
          
          }
      },
      methods(){
        //获取json格式的数据 fileId-value格式的
        getFormData() {},
        //设置组件的value
        setValue(fileId, newV) {},
        //表单验证的回调函数
        validate(callback) {},
        //将rule重置成最开始的状态
        resetRule() {},
        //更新rule
        updateRule() {},
        //设置组件的option
        setRuleItemOptions() {},
      
      }
 }