@case-ui/form

CaseUI 表单

基础

使用option的方式快速生成表单，并且可以在config.layoutCol 配置col的删格化配置，通过type配置元素类型，通过元素.options配置选项。通过config.value 填充，并允许使用getSubmit([type])获得当前表单的值，type 提供了三种模式：

• 默认，获得用户设置的值 + 表单控件的值
• form,获得控件的值
• visible,获得显示项控件的值 config.readonly = true 时表单内容显示只读，只读会知道获取select 、checkbox 的label 显示，本质还是基于options的选项

:::preview 说明 ||

demo-preview=./form/base.vue

:::

校验

表单校验可以统一在config.rules添加，校验规则和底层框架保持一致,并且你可以通过当前组件实例的form直接调用底层的form的api。 我们可以在控件上设置value作为控件的默认值，注意了如果使用el form.resetFields api 只会重置成默认值，而不是空，如果想重置成空应该通过config.value

:::preview 说明 ||

demo-preview=./form/demo.vue

:::

网络请求

支持范围： 表单回显 、下拉选择、多选、单选、级联选择

支持在config设置http让组件自己发起一个请求，注意初始化组件app.use(CaseForm, Temp) Temp.fetch 请求方法,组件会返回options:http 的配置，callback:请求结束回调 两个参数，重点说明下callback这里只处理值的部分。还支持提供了cBefore:请求前构造，同样是options 和callback 两个参数，这个执行完成后才会传到fetch处理；cAfter:请求结束处理器，会在fetch结束触发，拥有res:请求返回，callback：处理完成回调两个参数；其中cBefore和cAther两个钩子也支持直接return 返回钩子会对返回的参数进行处理处理，注意的是必须返回整个options。

• 只要你配置了http,所有组件默认会发起一次请求，并将返回添加到生成的当前组件配置下的options,如果当返回的枚举类不是以value/label可以通过props修改
• http的数据是会覆盖在config.value。

注意事项

• cascader 控件回填，当设置lazyLoad 时必须在末级的时候设置 leaf:false否则值为null

:::preview 说明 ||

demo-preview=./form/http.vue

:::

关联

我们可以配置depend:{name:""}通过name来关联其他控件，当name为name1,name2时作将监控多个参数，默认下当监控的值改变会清空当前输入框，当然也可以设置depend.clear=false不清空。

:::preview 说明 ||

demo-preview=./form/watch.vue

:::

标签

<c-form  :config='config' ></c-form>

参数 config

属性名	类型	说明
data	Array	（必须）控件部分的配置，其中name:字段名，type:类型对应 template.js 的应的控件命
value	Object	控件的回显值
layoutCol	Object	配置控件的删格布局，具体参考UI框架的配置
rules	Object	控件校验配置，使用name关联
http	Object	表单参数的请求

参数 config.data

属性名	类型	说明
name	String	（必须）字段
type	String	（必须）对 temlate.js 的控件
http	Object	网络请求，会在控件中添加options,并在控件渲染后自动发起请求
required	Boolean	为控件添加rules空校验
depend	Object	依赖字段
on	Object	可以根据UI框架提供配置更多事件on:{ change:()=>{} }
其他	-	可以根据UI框架提供更多配置

参数 config.data[].depend

name| String |（必须）字段,支持多个字段name1,name2 change| Function | 当参数改变时触发 noClean | Boolean | 当控件改变时，字段清空当前控件的值，*** 注意通过 config.value 和 this.setData 不会触发当前情况 ***

变量

属性名	类型	说明
form	Object	ui框架表单控件的实例

方法

属性名	参数	说明
getData	-	获得网络请求数据
setEmpty	String	设置成空 或 某控件设置空
setData	Object	根据字段设置参数
getSubmit	String	获得更加 tempalte.js dataProcessor 数据处理的参数，我们还支持参数处理form只获取控件的参数，visable只获得当前显示控件的参数
getInput	String	获得控件的实例

事件

属性名	说明
change	当数据改变时会触发，返回当前参数

迭代

1.0.1

• porps.modelValue 为vue3 ，vue2下使用props.value

1.0.0

• 初始化项目