# 使用示例

授权用户可以到控制台-已购产品中下载完整示例代码

# 加载动态数据

查看效果

# 使用赋值变量

@1.2.7 高级版本提供

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :remote-option="dynamicData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button @click="handleLoadOption">Load Option</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"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,"width":"","remote":true,"remoteType":"option","remoteOption":"option","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1575969479252","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1575969479252","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      dynamicData: {
        
          option : [], // 单选框组 option data
    
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    },

    handleLoadOption () {
      // 模拟数据请求
      setTimeout(() => {
        this.dynamicData.option = [
          {value: '1111', label: '1111'},
          {value: '2222', label: '2222'},
          {value: '3333', label: '3333'}
        ]
      }, 500)
    }
  }
}

# 使用方法函数


<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"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,"width":"","remote":true,"remoteType":"func","remoteOption":"option_1576033512246","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_option","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1576033512246","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      remoteFuncs: {
        
            func_option (resolve) {
              setTimeout(() => {
                const option = [
                  {value: '1111', label: '1111'},
                  {value: '2222', label: '2222'},
                  {value: '3333', label: '3333'}
                ]

                resolve(option)
              }, 500)
            },
    
      },
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

# 省市区数据联动

查看效果

@1.2.7 高级版本提供

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      :remote-option="dynamicData"
      ref="generateForm"
      @on-province-change="onProvinceChange"
      @on-city-change="onCityChange"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionProvince","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925417","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true},"name":"省","key":"1576064925417","model":"province","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionCity","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925610","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"市","key":"1576064925610","model":"city","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionDistrict","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925781","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"区","key":"1576064925781","model":"district","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      editData: {},
      remoteFuncs: {
        
      },
      dynamicData: {
        
          optionProvince : [], // 省 option data
    
          optionCity : [], // 市 option data
    
          optionDistrict : [], // 区 option data
    
      },
      data: null
    }
  },
  mounted () {
    axios.get('/data.json').then(data => {
      this.data = data.data

      this.dynamicData.optionProvince = Object.keys(this.data[86]).map(item => ({
        value: item,
        label: this.data[86][item]
      }))
    })
  },
  methods: {
    onProvinceChange (value) {
      if (value) {
        this.$refs.generateForm.display(['city'])
        this.$refs.generateForm.hide(['district'])

        this.$refs.generateForm.setData({
          city: '',
          district: ''
        })

        this.dynamicData.optionCity = Object.keys(this.data[value]).map(item => ({
          value: item,
          label: this.data[value][item]
        }))
      }
    },
    onCityChange (value) {
      if (value) {
        this.$refs.generateForm.display(['district'])

        this.$refs.generateForm.setData({
          district: ''
        })

        this.dynamicData.optionDistrict = Object.keys(this.data[value]).map(item => ({
          value: item,
          label: this.data[value][item]
        }))
      }
    },
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

# 使用 antd 表单

<template>
  <div>
    <fm-generate-antd-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-antd-form>
    <a-button type="primary" @click="handleSubmit">Submit</a-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1580735211034","remoteOption":"option_1580735211034"},"name":"单行文本","key":"1580735211034","model":"input_1580735211034","rules":[{"type":"string","message":"单行文本格式不正确"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"disabled":false,"pattern":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1580735214742","remoteOption":"option_1580735214742"},"name":"多行文本","key":"1580735214742","model":"textarea_1580735214742","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,"width":"","remote":false,"remoteType":"option","remoteOption":"option_1580735218112","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1580735218112","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1580735218112","model":"radio_1580735218112","rules":[]},{"type":"checkbox","icon":"icon-check-box","options":{"inline":false,"defaultValue":[],"showLabel":false,"options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"required":false,"width":"","remote":false,"remoteType":"option","remoteOption":"option_1580735222992","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1580735222992","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"多选框组","key":"1580735222992","model":"checkbox_1580735222992","rules":[]},{"type":"rate","icon":"icon-pingfen1","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showScore":false,"remoteFunc":"func_1580735236274","remoteOption":"option_1580735236274"},"name":"评分","key":"1580735236274","model":"rate_1580735236274","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3}}
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

# 更多...

更多示例持续更新中,如果您有示例需求可以来信告知:gavin_lei@qq.com