Skip to content
关注微信公众号,获取最新动态

字段选项动态数据设置

单选框组、多选框组、下拉选择框等字段需要动态加载选项数据时,需要配置动态数据,可以通过数据源、赋值变量或者方法函数来完成。

TIP

配置动态数据的时候,选择以下任一种配置即可。

使用数据源

选择数据源选项后,在下拉框中选择需要的数据源即可。关于如何配置数据源可以查看文档 数据源配置

使用赋值变量

在使用 GenerateForm 生成器组件时可以直接对配置的变量进行赋值,数据就可以绑定到字段上,代码如下:

vue
<template>
  <fm-generate-form 
    :remote-option="dynamicData"
    ref="generateForm"
  >
  </fm-generate-form>
</template>

<script>
export default {
  data () {
    return {
      dynamicData: {
        select_options : [], 
      }
    }
  },
  mounted () {
    this.dynamicData.select_options = [ 
      /** value 、label 分别是选项设置的时候配置的值和标签 */
      {value: 1, label: '动态数据1'}, 
      {value: 2, label: '动态数据2'} 
    ] 
  }
}
</script>
查看效果

使用方法函数

vue
<template>
  <div>
    <fm-generate-form
      :remote="remoteFuncs"
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      remoteFuncs: {
        func_options (resolve) { 
          const options = [ 
            /** value 、label 分别是选项设置的时候配置的值和标签 */
            {value: 1, label: '动态数据1'}, 
            {value: 2, label: '动态数据2'} 
          ] 
          resolve(options) 
        },
      },
    }
  }
}
</script>
查看效果