字段选项动态数据设置

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

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>

<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>

<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>

查看效果

字段选项动态数据设置 ​

使用数据源 ​

使用赋值变量 ​

使用方法函数 ​

字段选项动态数据设置

使用数据源

使用赋值变量

使用方法函数