form-create使用总结

本文总结了form-create在Vue中的使用经验,包括给表单项添加className、动态更新select选项、手动修改字段值、调用外层组件方法、验证规则设定及监听组件事件等常见操作,同时也探讨了自定义组件的简单实现。
摘要由CSDN通过智能技术生成
给表单项加className方便调整样式
rule: [
{
   
          type: 'input',
          title: '货物总毛重(KG)', // label名称
          field: 'totalGrossWt', // 字段名称
          value: '', // input值,
          col: {
   span: 16, labelWidth: 50%},
          className: 'total-gross-wt',
          props: {
   
            type: 'text',
            clearable: true, // 是否显示清空按钮
            placeholder: '请输入...'
          },
          validate: [{
   
            pattern: /^(0|[1-9]\d*)(\s|$|\.\d{1,3}\b)/, // /^[0-9]+([.]{1}[0-9]{1,3})?$/,
            message: '请正确输入毛重,最多3位小数',
            trigger: 'blur'
          }]
        }
]
$f.updateRule动态更新select类型表单的options不成功

如果options有值,然后通过以下方式清空,无效,原因未知。目前改用$f.set或者$f.model()

$f.updateRule('distDestPlace',{
   
  options:[]
})
$f.updateRule更新不成功可以用$f.set或者$f.model()
// 例如动态设置select options的方法
this.updateSelectOption('distDestPlace', [])
updateSelectOption (field, value) {
   
      let $f = this.model
      let index = $f.fields().indexOf(field)
      $f.set($f.rule[index], 'options', value)
    },

或者

$f.model()[field].options = []
全局配置中的onReload,mounted
  • mounted:表单创建成功后回
  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值