devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

表单自动生成器form-create介绍：可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器

作者：运维做开发 | 2024-07-08 01:32:55

赞

踩

form-create

表单自动生成器form-create介绍

可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器

 

介绍

轻松搞定 form 表单,让你不在为表单而烦恼

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

 

 

安装

ElementUI

npm i @form-create/element-ui

Iview 2.x|3.x

npm i @form-create/iview

Iview 4.x

npm i @form-create/iview4

 

导航

 

功能

  • 自定义组件

    • 可生成任何Vue组件
    • 自带数据验证
    • 可快速扩展
    • 轻松转换为表单组件

  • 通过 JSON 生成表单

  • 通过 Maker 生成表单

  • 全局配置

    • 可以设置表单配置
    • 可以设置指定组件全局配置
    • 可以设置所有组件公共的全局配置

  • 强大的API，可快速操作表单

  • 双向数据绑定

  • 事件扩展

  • 局部更新

  • 数据验证

  • 栅格布局

  • 内置组件

    • hidden
    • input
    • inputNumber
    • checkbox
    • radio
    • switch
    • select
    • autoComplete
    • cascader
    • colorPicker
    • datePicker
    • timePicker
    • rate
    • slider
    • upload
    • tree
    • frame

 

快速上手

本节将以iview版本为例介绍如何在项目中使用 form-create

ElementUI示例

 

引入 form-create V2

浏览器

  1. <!-- import Vue 2.5-->
  2. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  3.  
  4. <!-- import iview 2.14.3-->
  5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/styles/iview.css">
  6. <script src="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/iview.min.js"></script>
  7.  
  8. <!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
  9. <script src="https://cdn.jsdelivr.net/npm/@form-create/data/dist/province_city_area.js"></script>
  10.  
  11. <!-- import formCreate -->
  12. <script src="https://cdn.jsdelivr.net/npm/@form-create/iview/dist/form-create.min.js"></script>

NodeJs

在 main.js 中写入以下内容：

  1. import Vue from 'vue';
  2. import iView from 'iview';
  3. import 'iview/dist/styles/iview.css';
  4.  
  5. import formCreate from '@form-create/iview'
  6. //获取生成器
  7. import { maker } from '@form-create/iview'
  8.  
  9. Vue.use(iView);
  10. Vue.use(formCreate)

 

生成表单

可使用3种方式创建表单:

组件模式, Vue 原型方法, Window 全局方法

 

组件模式

使用 <form-create></form-create> 标签创建表单

  1. <div id="app1">
  2.     <form-create v-model="fApi" :rule="rule" :option="option"></form-create>
  3. </div>

 

NodeJs

  1. export default {
  2.   data () {
  3.     return {
  4.      //实例对象
  5.      fApi:{},
  6.      //表单生成规则
  7.      rule:[
  8.        {
  9.           type:'input',
  10.           field:'goods_name',
  11.           title:'商品名称'
  12.         },
  13.         {
  14.           type:'datePicker',
  15.           field:'created_at',
  16.           title:'创建时间'
  17.         }
  18.      ],
  19.      //组件参数配置
  20.      option:{
  21.        //表单提交事件
  22.        onSubmit:function (formData) {
  23.          alert(JSON.stringify(formData));
  24.        }
  25.      }
  26.     };
  27.   }
  28. };

浏览器

  1. new Vue({
  2.   el:'#app1',
  3.   data:{
  4.     fApi:{},
  5.     rule:[
  6.       {
  7.         type:'input',
  8.         field:'goods_name',
  9.         title:'商品名称'
  10.       },
  11.       {
  12.         type:'datePicker',
  13.         field:'created_at',
  14.         title:'创建时间'
  15.       }
  16.     ],
  17.     option:{
  18.       onSubmit:function (formData) {
  19.         alert(JSON.stringify(formData));
  20.       }
  21.     }
  22.   }
  23. });

Vue 原型方法

使用 vue 原型方法$formCreate(rule,option) 创建表单

  1. <div id="app2">
  2.     <div id="form-create"></div>
  3. </div>
  1. new Vue({
  2.   el:'#app2',
  3.   data:{
  4.       fApi:{},
  5.       model:{}
  6.   },
  7.   mounted:function () {
  8.     //表单插入的节点
  9.     const root = document.getElementById('form-create');
  10.     //fApi为表单api
  11.     this.fApi = this.$formCreate(
  12.       //表单生成规则
  13.       [
  14.     	this.$formCreate.maker.input('商品名称','goods_name',''),
  15.       	this.$formCreate.maker.date('创建时间','created_at')
  16.       ],
  17.       //组件参数配置
  18.       {
  19.         el:root,
  20.         //表单提交事件
  21.         onSubmit:function (formData,fApi) {
  22.           fApi.btn.loading();
  23.         }
  24.     });
  25.   }
  26. })

 

全局方法

使用 window 全局方法formCreate.create(rule,option)创建表单

  1. <div id="app3">
  2.     <div id="form-create"></div>
  3. </div>
  1. //表单插入的节点
  2. const root = document.getElementById('form-create');
  3.  
  4. //$f为表单api
  5. const $f = window.formCreate.create(
  6.   //表单生成规则
  7.   [
  8.     {
  9.       type:'input',
  10.       field:'goods_name',
  11.       title:'商品名称'
  12.     },
  13.     {
  14.       type:'datePicker',
  15.       field:'created_at',
  16.       title:'创建时间'
  17.     }
  18.   ],
  19.   //组件参数配置
  20.   {
  21.     el:root,
  22.     //显示表单重置按钮
  23.     resetBtn:true,
  24.     //表单提交事件
  25.     onSubmit:function (formData) {
  26.       //按钮进入提交状态
  27.       $f.btn.loading();
  28.     }
  29. });

 

JSON

使用 JSON 生成表单

  1. <div id="app3">
  2.     <div id="form-create"></div>
  3. </div>
  1. //JSON 规则
  2. const rule = [
  3.   {"type":"input","field":"goods_name","title":"商品名称","value":"mi"},
  4.   {"type":"inputNumber","field":"goods_price","title":"商品价格","value":12}
  5. ]
  1. //表单插入的节点
  2. const root = document.getElementById('form-create');
  3.  
  4. //$f为表单api
  5. const $f = window.formCreate.create(
  6.   //表单生成规则
  7.   rule,
  8.   //组件参数配置
  9.   {
  10.     el:root,
  11.     //显示表单重置按钮
  12.     resetBtn:true,
  13.     //表单提交事件
  14.     onSubmit:function (formData) {
  15.       //按钮进入提交状态
  16.       $f.btn.loading();
  17.     }
  18. });

 

在线示例

以下是 from-create 的功能演示和参考案例

 

案例

 

组件示例

 

功能示例

 

挂载组件

 

formCreate

全局挂载

Vue.use(formCreate);

局部挂载

  1. //Vue 组件
  2. {
  3.    components: {
  4.        formCreate: formCreate.$form()
  5.    }
  6. }

 

自定义组件

通过 form-create 生成的组件需要先通过以下方式挂载后才可以生成. 必须在挂载 formCreate 之前挂载所有需要生成的自定义组件

全局挂载

  1. //自定义组件
  2. Vue.component(TestComponent);
  3. //或者
  4. formCreate.component(TestComponent.name, TestComponent);
  5.  
  6. Vue.use(formCreate);

局部挂载

  1. //自定义组件
  2. formCreate.component(TestComponent.name, TestComponent);
  3.  
  4. //Vue 组件
  5. {
  6.    components: {
  7.        formCreate: formCreate.$form()
  8.    }
  9. }

 

绑定事件

例如给i-input组件添加on-change事件,事件名称参考Input

  1. {
  2.     type:'input',
  3.     field: 'test',
  4.     title: 'test',
  5.     value: '',
  6.     on: {
  7.         'on-change': function(){
  8.             console.log('value 发生变化');
  9.         }
  10.     }
  11. }

通过 emit 方式绑定事件

只支持在组件模式下

  1. //rule
  2. [{
  3.      type:'input',
  4.      field: 'test',
  5.      title: 'test',
  6.      value: '',
  7.      emit: ['on-change']
  8.  }]

事件名称为${field}-${eventName}

<form-create :rule="rule" test-on-change="onChange"> </form-create>

通过 emitPrefix 自定义事件前缀

  1. //rule
  2. [{
  3.      type:'input',
  4.      field: 'test',
  5.      title: 'test',
  6.      value: '',
  7.      emit: ['on-change'],
  8.      emitPrefix: 'xaboy',
  9.  }]

事件名称为${emitPrefix}-${eventName}

<form-create :rule="rule" xaboy-on-change="onChange"> </form-create>

通过 on 方法绑定事件 1.0.2+

  1. //rule
  2. [{
  3.      type:'input',
  4.      field: 'test',
  5.      title: 'test',
  6.      value: '',
  7.      emit: ['on-change'],
  8.      emitPrefix: 'xaboy',
  9.  }]
  1. $f.on('xaboy-on-change',function(){
  2.     //TODO
  3. })
  4.

向事件中注入$f和自定义参数

  1. //rule
  2. [{
  3.      type:'input',
  4.      field: 'test',
  5.      title: 'test',
  6.      value: '',
  7.      emit: [{
  8.         name: 'on-change',
  9.         inject: ['自定义参数,数据类型不限']
  10.      }],
  11.      emitPrefix: 'xaboy',
  12.  }]
<form-create :rule="rule" xaboy-on-change="onChange"> </form-create>

向事件中注入参数后,事件会额外增加一个参数

  1. //未注入
  2. {
  3.     onChange: function(val){
  4.  
  5.     }
  6. }
  7. //注入后
  8. {
  9.     onChange: function(inject, val){
  10.  
  11.     }
  12. }

inject 参数的数据结构

  1. {
  2.     $f:Object,//api
  3.     rule:Array,//生成规则
  4.     self:Object,//当前生成规则
  5.     option:Object,//全局配置
  6.     inject:Any,//自定义注入的参数
  7. }

参数注入也可以通过全局配置项injectEvent:true开启

 

自定义布局

通过设置生成规则的col配置项可以实现组件的布局

iview Col | element-ui Col

示例1: col12.png

  1. [
  2. 	{
  3. 		type:'input',
  4. 		field:'test-1',
  5. 		title:'col-12',
  6. 		value:'',
  7. 		col:{
  8. 			span:12
  9. 		}
  10. 	},
  11. 	{
  12. 		type:'input',
  13. 		field:'test-2',
  14. 		title:'col-12',
  15. 		value:'',
  16. 		col:{
  17. 			span:12
  18. 		}
  19. 	}
  20. ]

示例2:

示例中使用的是 ElementUI

当没有设置col时默认为{span:24}

row24.png

  1. [
  2. 	{
  3. 	    type: 'el-row',
  4. 	    native: true,
  5. 	    children: [
  6. 	        {
  7. 	            type: 'el-col',
  8. 	            props: {
  9. 	                span: 12
  10. 	            },
  11. 	            children: [
  12. 	            	{
  13. 	            		type:'datePicker',
  14. 	            		title: '活动日期',
  15. 	            		field: 'section_day',
  16. 	            		value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
  17. 	            		props:{
  18. 	            			type:'datetimerange'
  19. 	            		}
  20.  
  21. 	            	},
  22. 	            	{
  23. 	            		type:'timePicker',
  24. 	            		title: '活动时间',
  25. 	            		field: 'section_time',
  26. 	            		value: ['11:11:11', '22:22:22'],
  27. 	            		props:{
  28. 	            			isRange: true,
  29. 	                    	placeholder: "请选择活动时间"
  30. 	            		}
  31.  
  32. 	            	},
  33. 	            ]
  34. 	        },
  35. 	        {
  36. 	            type: 'el-col',
  37. 	            props: {
  38. 	                span: 12
  39. 	            },
  40. 	            children: [
  41. 	            	{
  42. 	            		type:'inputNumber',
  43. 	            		title: '排序',
  44. 	            		field: 'sort',
  45. 	            		value: 0,
  46. 	            		props:{
  47. 	            			precision: 2
  48. 	            		},
  49. 	            		col:{
  50. 	            			span: 12
  51. 	            		},
  52. 	            		validate: [{require: true, type: 'number', min: 10}]
  53. 	            	},
  54. 	            	{
  55. 	            		type:'colorPicker',
  56. 	            		title: '颜色',
  57. 	            		field: 'color',
  58. 	            		value: '#ff7271',
  59. 	            		props:{
  60. 	            			hue: true,
  61. 	            			format: 'hex'
  62. 	            		},
  63. 	            		col:{
  64. 	            			span: 12
  65. 	            		}
  66. 	            	},
  67. 	            ]
  68. 	        }
  69. 	    ]
  70. 	}
  71. ]

 

校验规则

可以通过 validate 配置项设置组件的验证规则,自定义的表单组件也支持校验

在线示例

type 需要根据组件的 value 类型定义

 

示例

验证 input 组件必填

  1. {
  2.     type:'input',
  3.     //...
  4.     validate: [{type: 'string', required: true}]
  5. }

验证 date 组件必填

  1. {
  2.     type:'datePicker',
  3.     //...
  4.     validate: [{type: 'date', required: true}]
  5. }

验证 checkbox 组件 最少选择三个

  1. {
  2.     type:'checkbox',
  3.     //...
  4.     validate: [{type: 'array', required: true, min:3}]
  5. }

 

参数说明

参数说明类型默认值
enum枚举类型string-
len字段长度number-
max最大长度number-
message校验文案string-
min最小长度number-
pattern正则表达式校验RegExp-
required是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any-
type内建校验类型，可选项string'string'
validator自定义校验function(rule, value, callback)-
whitespace必选时，空格是否会被视为错误booleanfalse

更多高级用法可研究 async-validator。

 

修改默认按钮

本文将介绍如何使用自定义组件按钮代替默认按钮

 

隐藏默认按钮

首先通过设置全局配置隐藏默认的提交按钮和重置按钮

  1. {
  2.   submitBtn: false,
  3.   resetBtn: false
  4. }

 

生成自定义按钮组件

示例中使用的是 ElementUI

default-button.png

  1. [
  2. 	{
  3. 		type: 'input',
  4. 		field: 'field-1',
  5. 		title: 'test',
  6. 		value: 'test submit',
  7. 		col: {
  8. 			span:6
  9. 		}
  10.  
  11. 	},
  12. 	{
  13. 		type: 'el-button',
  14. 		on: {
  15. 			click: function(){
  16. 				//TODO 提交表单
  17. 				$f.submit();
  18. 				//或者
  19. 				$f.resetFields();
  20. 			}
  21. 	    },
  22. 		col: {
  23. 			span:3,
  24. 			push: 1
  25. 		},
  26. 		children: ['submit']
  27.  
  28. 	}
  29. ]

 

组件公共配置

通过全局配置中的global配置项可实现组件的公共配置,支持设置组件所有的配置项

全局配置

设置所有组件的col为{span:6},并且禁用

  1. {
  2.     global: {
  3.       '*': {
  4.           props: {
  5.               disabled: true
  6.           },
  7.           col: {
  8.               span: 6
  9.           }
  10.       }
  11.     }
  12. }

设置 upload 组件上传成功的回调事件

  1. {
  2.     global: {
  3.       upload: {
  4.           props: {
  5.               onSuccess: function(res, file){
  6.                 file.url = res.data.url;
  7.               }
  8.           }
  9.       }
  10.     }
  11. }

 

更新生成规则

表单组件

生成规则

  1. rule = [{
  2.      type:'input',
  3.      field: 'test',
  4.      title: 'test',
  5.      value: '',
  6.      props: {
  7.         disabled: false
  8.      },
  9.      emit: ['on-change']
  10.  }]

直接修改生成规则

  1. rule[0].props.disabled = true;
  2. rule[0].value = "update";

通过$f修改

获取$f

    1. //通过`field`获取生成规则
    2. const rule = $f.getRule('test');
    3. //修改方法通过同上
    1. const $model = $f.model();
    2. const rule = $model.test;
    1. $f.updateRule('test',{
    2.     value: 'update',
    3.     props: {
    4.         disabled: true
    5.     }
    6. });

修改组件的 value

修改指定组件

$f.setValue('test', "update");

批量修改

  1. $f.setValue({
  2.     test: "update"
  3. });

 

自定义组件

自定义组件如果需要通过$f的方法需要定义name或者field 字段,自定义表单组件使用field,其他自定义组件使用name

自定义表单组件

生成规则

  1. rule = [{
  2.     type:'i-button',
  3.     name: 'btn',
  4.     props: {
  5.     disabled: false
  6.     },
  7.     children: ['test Button']
  8. }]

#直接修改生成规则

rule[0].props.disabled = true;

通过$f修改

获取$f

    1. //通过`field`获取生成规则
    2. const rule = $f.getRule('btn');
    3. //修改方法通过同上
    1. const $component = $f.component();
    2. const rule = $component.btn;
    1. $f.updateRule('btn',{
    2.     props: {
    3.         disabled: true
    4.     }
    5. });

 

更新规则

在尾部增加规则

  1. rule.push({
  2.    type:"input",
  3.    title:"商品简介",
  4.    field:"goods_info",
  5.    value:"",
  6.    props: {
  7.        "type": "text",
  8.        "placeholder": "请输入商品简介",
  9.    },
  10.    validate:[
  11.        { required: true, message: '请输入商品简介', trigger: 'blur' },
  12.    ],
  13. })

通过$f添加规则

在 goods_name 字段后面增加一份图片上传组件,默认添加到尾部

  1. $f.append({
  2.     type:"input",
  3.     title:"商品简介",
  4.     field:"goods_info",
  5.     value:"",
  6.     props: {
  7.      "type": "text",
  8.      "placeholder": "请输入商品简介",
  9.     },
  10.     validate:[
  11.      { required: true, message: '请输入商品简介', trigger: 'blur' },
  12.     ],
  13. },'goods_name');

在 goods_name 字段之前增加一份 input 组件,默认添加到头部

  1. $f.prepend({
  2.     type:"input",
  3.     title:"商品简介",
  4.     field:"goods_info",
  5.     value:"",
  6.     props: {
  7.       "type": "text",
  8.       "placeholder": "请输入商品简介",
  9.     },
  10.     validate:[
  11.       { required: true, message: '请输入商品简介', trigger: 'blur' },
  12.     ],
  13. },'goods_name');

 

删除第一条规则

rule.splice(0,1);

删除表单组件

$f.removeField('test');

删除自定义组件

$f.removeField('btn');

 

设置组件的插槽 slot

例如给i-input组件通过prefix和suffix设置前缀及后缀图标 Input

  1. {
  2.     type:'input',
  3.     field: 'test',
  4.     title: 'test',
  5.     value: '',
  6.     children: [
  7.         {
  8.             type:'i-con',
  9.             props: {
  10.                 type: 'ios-contact'
  11.             },
  12.             slot: 'prefix' //前置插槽的名称
  13.         },
  14.         {
  15.             type:'i-con',
  16.             props: {
  17.                 type: 'ios-search'
  18.             },
  19.             slot: 'suffix' //后置插槽的名称
  20.         },
  21.     ]
  22. }

 

省市区联动数据

安装

npm install @form-create/data

导入

  1. //省市二级联动
  2. import province_city from "@form-create/data/dist/province_city.js"
  3. //省市二级联动(id)
  4. import province_city_code from "@form-create/data/dist/province_city_code.js"
  5. //省市区三级联动
  6. import province_city_area from "@form-create/data/dist/province_city_area.js"
  7. //省市区三级联动(id)
  8. import province_city_area_code from "@form-create/data/dist/province_city_area_code.js"

浏览器

  1. <!-- 省市二级联动 -->
  2. <script src="https://cdn.jsdelivr.net/npm/@form-create/data/dist/province_city.js"></script>
  3. <!-- 省市二级联动(id) -->
  4. <script src="https://cdn.jsdelivr.net/npm/@form-create/data/dist/province_city_code.js"></script>
  5. <!-- 省市区三级联动 -->
  6. <script src="https://cdn.jsdelivr.net/npm/@form-create/data/dist/province_city_area.js"></script>
  7. <!-- 省市区三级联动(id) -->
  8. <script src="https://cdn.jsdelivr.net/npm/@form-create/data/dist/province_city_area_code.js"></script>

访问,以省市二级联动为例

  1. formCreate.data.province_city
  2. //或者
  3. window.province_city

 

常见问题

$f为创建表单后返回的实例,field 为字段名称,rule 为表单生成规则

手动修改某个字段的值

  1. $f.bind()[field] = '修改后的值'
  2. $f.model()[field].value = '修改后的值'
  3. rule[2].value = '修改后的值' //rule[2]是field字段的生成规则
  4. $f.setValue(field,value)

说明: 如果修改的值为数组必须直接赋值或使用push,splice等方法修改

批量赋值

$f.setValue({[field1]:value1,[field2]:value2})

动态修改表单规则

  1. $f.model()[field].props.disabled = false
  2. rule[2].props.disabled = false //rule[2]是要修改的生成规则

说明: 修改的属性需要提前在生成规则里预定义

追加表单字段

  1. 在 goods_name 字段后面增加一份图片上传组件,默认添加到尾部

    1. $f.append($formCreate.maker.upload(
    2.     '产品主图',
    3.     'logo',
    4.     'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
    5. ).props({
    6.           "action": "",
    7.           "maxLength": 1,
    8.           "multiple": false,
    9.           "type": "select",
    10.           "uploadType": "image",
    11.           "name": "file",
    12.           "onSuccess": function () {
    13.               return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
    14.           }
    15.      })
    16.      .validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}
    17. ),'goods_name');

  2. 在 goods_name 字段之前增加一份 input 组件,默认添加到头部

    1. $f.prepend({
    2.        type:"input",
    3.        title:"商品简介",
    4.        field:"goods_info",
    5.        value:"",
    6.        props: {
    7.            "type": "text",
    8.            "placeholder": "请输入商品简介",
    9.        },
    10.        validate:[
    11.            { required: true, message: '请输入商品简介', trigger: 'blur' },
    12.        ],
    13. },'goods_name');

  3. 在表单尾部追加一个 input 组件

    1. rules.push({
    2.        type:"input",
    3.        title:"商品简介",
    4.        field:"goods_info",
    5.        value:"",
    6.        props: {
    7.            "type": "text",
    8.            "placeholder": "请输入商品简介",
    9.        },
    10.        validate:[
    11.            { required: true, message: '请输入商品简介', trigger: 'blur' },
    12.        ],
    13. })

删除表单字段

  1. 删除指定字段

    $f.removeField(field);

  2. 删除最后一个字段

    rules.pop()

隐藏指定字段

  1. $f.hidden(true, field)

根据后台返回的规则生成表单

  1. fetch('api').then(rule=>{
  2.     $f = formCreate.create(rule,{
  3.         onSubmit(formData){
  4.             // 表单提交事件
  5.             $f.btn.loading(true);
  6.             //TODO 提交表单
  7.         }
  8.     })
  9. })

隐藏默认提交按钮

设置全局配置options.submitBtn = false即可隐藏

定制默认提交按钮

  1.  option: {
  2.       submitBtn: {
  3.         type: "basic",
  4.         size: "mini",
  5.         icon: "",
  6.         shape: "round",
  7.         innerText: "submit",
  8.         col: {
  9.           span: 4,
  10.           offset: 10
  11.         }
  12.       }
  13.   }

显示默认重置按钮

设置全局配置options.resetBtn = true即可显示

Vue 版本不支持 compile

vue-version

 

获取 $f 参考 

在配置项中调用外层组件的方法 参考 #51

规则正在其他form-create中使用

一个生成规则rule只能同时在一个<form-create>中使用. 如果需要多次使用:

  • 在使用前自行深拷贝
  • 从被使用的<form-create>中移除

 

验证规则无效

请注意 value 的数据类型.如果组件为多选或区间选择时 value 的数据类型为Array,需要在验证规则中设置type:'array'

验证规则说明

 

switch 组件不显示

将 slot 配置项配置在 props 中

  1. props: {
  2.     "trueValue":"1", 
  3.     "falseValue":"0",
  4.     "slot": {
  5.         open:"上架", 
  6.         close:"下架", 
  7.     }, 
  8. }

 

修改组件值后页面没有更新

在表单创建后到成功渲染之前修改是无效的

  • 在生成表单之前修改
  • 在option.mounted中修改
  • 在首次表单渲染后修改

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/797297
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号