FormMaking 官方文档

简体中文

English

简体中文

English

Appearance

关注微信公众号，获取最新动态
官方QQ交流群：985558286

GenerateForm ​

表单生成器组件，通过 JSON Schema 快速渲染出表单页面。

代码演示 ​

基础用法 ​

直接根据 JSON Schema 渲染出表单，获取表单数据。

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>

    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button type="primary" @click="handleSubmit(false)">Submit(不验证表单)</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleSubmit (validate = true) {
      this.$refs.generateForm.getData(validate).then(data => {
        this.$alert(data, '表单数据')
      })
    }
  }
}
</script>

TIP

getData 是异步方法，默认情况获取数据前验证表单数据，只有验证成功才能获取到表单数据 data ；若不需要表单验证，想要直接获取表单数据，可以添加参数 getData(false) 将不会验证表单数据。

加载表单数据 ​

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>

    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button type="primary" @click="handleRest">重置表单</el-button>
    <el-button type="primary" @click="handleSetData">setData</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
      editData: {
        input: '123',
        textarea: '123'
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        this.$alert(data, '表单数据')
      })
    },
    handleRest () {
      this.$refs.generateForm.reset()
    },
    handleSetData () {
      this.$refs.generateForm.setData({
        input: 'new 123',
        textarea: 'new 123',
        radio: 'Option 1'
      })
    }
  }
}
</script>

TIP

value 属性给表单赋值，只有在表单初始化时才能生效，表单和默认数据一起加载，重置表单不会清空默认数据

setData 方法可以在表单初始化后动态赋值，重置表单将会清空表单数据

异步加载表单 ​

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>

    <el-button type="primary" @click="handleLoad">加载表单</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {},
    }
  },
  methods: {
    handleLoad () {
      this.jsonData = {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}}

      this.$nextTick(() => {
        this.$refs.generateForm.refresh()
      })
    }
  }
}
</script>

TIP

获取到json后直接修改 data 属性值，修改了表单配置需要在 $nextTick() 方法中调用 refresh 方法刷新表单。

监听表单数据变化 ​

表单值变化: --
查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
      @on-change="onChange"
    >
    </fm-generate-form>
    <div>表单值变化: {{field}} -- {{value}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
      field: '',
      value: ''
    }
  },
  methods: {
    onChange (field, value, data) {
      this.field = field
      this.value = value
    }
  }
}
</script>

动态设置表单禁用隐藏 ​

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleHide">隐藏文本框</el-button>
    <el-button type="primary" @click="handleDisplay">显示文本框</el-button>
    <el-button type="primary" @click="handleDisabled">禁用文本框</el-button>
    <el-button type="primary" @click="handleEnabled">启用文本框</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleHide () {
      this.$refs.generateForm.hide(['input', 'textarea'])
    },
    handleDisplay () {
      this.$refs.generateForm.display(['input', 'textarea'])
    },
    handleDisabled () {
      this.$refs.generateForm.disabled(['input', 'textarea'], true)
    },
    handleEnabled () {
      this.$refs.generateForm.disabled(['input', 'textarea'], false)
    }
  }
}
</script>

快速获取组件并绑定事件 ^1.4.0 版本支持 ​

通过 getComponent(字段标识) 获取到字段组件实例。

为单行文本框(input)绑定点击事件：

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleAddEvent">动态添加事件</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleAddEvent () {
      this.$refs.generateForm.getComponent('input').$el.onclick = () => {
        this.$alert('您点击了我', '提示')
      }
    }
  }
}
</script>

TIP

子表单中的组件可以通过 getComponent(tableId.rowIndex.fieldId) 获取。

自定义样式动态添加 ​

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleAdd">添加样式</el-button>
    <el-button type="primary" @click="handleRemove">移除样式</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleAdd () {
      this.$refs.generateForm.addClassName(['input', 'textarea'], 'custom-style')
    },
    handleRemove () {
      this.$refs.generateForm.removeClassName(['input', 'textarea'], 'custom-style')
    }
  }
}
</script>

<style>
.custom-style{
  padding: 10px;
}
.custom-style .el-form-item__label{
  font-size: 16px;
  color: red;
}
</style>

动态设置表单验证规则 ​

查看代码
vue
<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
      @on-change="handleChange"
    >
    </fm-generate-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"switch","icon":"icon-switch","options":{"defaultValue":false,"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"width":"","customProps":{},"remoteFunc":"func_nr2wgjc8","remoteOption":"option_nr2wgjc8","tableColumn":false,"subform":false},"events":{"onChange":""},"name":"是否必填","key":"nr2wgjc8","model":"switch","rules":[]},{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_uc1ogdma","remoteOption":"option_uc1ogdma","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"uc1ogdma","model":"input","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleChange (field, value) {
      if (field === 'switch') {
        if (value) {
          this.$refs.generateForm.setRules('input', [{required: true, message: '必须填写'}])
          this.$refs.generateForm.setOptions('input', {required: true})
        } else {
          this.$refs.generateForm.setRules('input', [{required: false}])
          this.$refs.generateForm.setOptions('input', {required: false})
        }
      }
    }
  }
}
</script>

API ​

属性 ​

参数说明类型默认值版本
data表单 JSON 配置数据object{}
value表单数据object-
remote表单配置的远端方法object{}
edit表单可编辑状态booleantrue
remote-option表单动态选项配置object{}
print-read打印阅读模式，表单值文本展示booleanfalse1.3.5

Events ​

事件名说明回调参数版本
on-change表单项数据变化时触发(field, value, data)
field: 数据改变的字段标识
value: 数据改变后的值
data: 表单数据

方法 ​

通过 this.$refs 可以获取到 GenerateForm 实例并调用实例方法

方法名说明参数版本
getData获取表单绑定的数据(isValidate = true) => promise
传入 false 不进行表单校验
reset重置表单数据() => void
() => promise^1.6.0
setData设置表单数据({id: value}) => void
({id: value}) => promise^1.6.0
hide隐藏表单字段(fields: []) => void
display显示表单隐藏的字段(fields: []) => void
disabled动态设置表单字段是否禁用(fields: [], disabled: true | false) => void
refresh刷新表单，当表单 JSON 改变时，需调用该方法重新加载表单() => void
() => promise^1.6.0
getValue获取某一字段输入值(field) => value1.3.1
getValues获取表单所有字段的值() => object1.3.1
sendRequest执行数据源请求(name: 数据源名称, args: 数据源参数) => promise1.4.0
getComponent获取表单中字段组件实例(field: 字段名称) => object | array1.4.0
addClassName表单项添加样式类(fields: [], className)
removeClassName移除表单样式类(fields: [], className)
setRules设置表单字段验证规则(field, rules)1.3.3
setOptions设置表单字段配置项，参见 字段可配置项(fields, options)1.3.3
setOptionData动态选项数据赋值，需要 options.remote 为 true 时生效(fields, newData)1.4.0
refreshFieldDataSource刷新字段绑定的数据源数据(field, args: 数据源参数)1.4.0
getFieldDataSource获取字段绑定的数据源值(field: 字段标识)^1.5.4
validate验证表单字段(fields: []) => promise1.4.0
triggerEvent调用表单配置的js事件(eventName: 事件名称, args: 事件参数)1.4.0
exportPDF导出PDF, 当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件() => promise^1.5.8
openDialog打开对话框(dialogId: 对话框字段标识)^1.6.3
closeDialog关闭对话框 (dialogId: 对话框字段标识)^1.6.3

Copyright © 2019-present FormMaking