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	表单可编辑状态	boolean	true
remote-option	表单动态选项配置	object	{}
print-read	打印阅读模式，表单值文本展示	boolean	false	1.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) => value	1.3.1
getValues	获取表单所有字段的值	() => object	1.3.1
sendRequest	执行数据源请求	(name: 数据源名称, args: 数据源参数) => promise	1.4.0
getComponent	获取表单中字段组件实例	(field: 字段名称) => object \| array	1.4.0
addClassName	表单项添加样式类	(fields: [], className)
removeClassName	移除表单样式类	(fields: [], className)
setRules	设置表单字段验证规则	(field, rules)	1.3.3
setOptions	设置表单字段配置项，参见字段可配置项	(fields, options)	1.3.3
setOptionData	选项数据动态赋值，~~需要 options.remote 为 true 时生效~~，1.6.9 之后，不再限制 options.remote	(fields, newData)	1.4.0
getOptions	获取表单字段配置项	(field, key)	^1.6.10
getOptionData	获取字段选项数据。	(field)	^1.6.10
refreshFieldOptionData	刷新字段选项绑定的动态数据，如果是表达式 args 不用传。	(field, args: 数据源参数)	^1.6.10
refreshDynamicValue	刷新字段动态值，不传参数表示刷新表单所有字段动态值。	(fields, args: 数据源参数)	^1.6.10
~~refreshFieldDataSource~~ 已废弃	刷新字段绑定的数据源数据	(field, args: 数据源参数)	1.4.0
~~getFieldDataSource~~ 已废弃	获取字段绑定的数据源值	(field: 字段标识)	^1.5.4
validate	验证表单字段	(fields: []) => promise	1.4.0
triggerEvent	调用表单配置的js事件	(eventName: 事件名称, args: 事件参数)	1.4.0
exportPDF	导出PDF, 当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件	() => promise	^1.5.8
print	表单打印, 当表单 print-read 属性为 true 时可用。	() => promise	^1.6.12
openDialog	打开对话框	(dialogId: 对话框字段标识)	^1.6.3
closeDialog	关闭对话框	(dialogId: 对话框字段标识)	^1.6.3

GenerateForm ​

代码演示 ​

基础用法 ​

加载表单数据 ​

异步加载表单 ​

监听表单数据变化 ​

动态设置表单禁用隐藏 ​

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

自定义样式动态添加 ​

动态设置表单验证规则 ​

API ​

属性 ​

Events ​

方法 ​

GenerateForm

代码演示

基础用法

加载表单数据

异步加载表单

监听表单数据变化

动态设置表单禁用隐藏

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

自定义样式动态添加

动态设置表单验证规则

API

属性

Events

方法