[Form Generator][一期替代方案]调用接口数据到opitions

使用接口数据实现Form Generator的选项填充

最新推荐文章于 2025-09-13 04:25:13 发布

原创

最新推荐文章于 2025-09-13 04:25:13 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Form Generator #调用接口 #接口替代方案

该博客介绍了如何在Form Generator中利用接口数据填充el-cascader组件的选项。通过在组件config.js中设置私有属性(private_: {assField: ''})，并新增控制层代码，实现在RightPanel.vue中的接口调用。控制层UI设计和点击操作后的流程也进行了说明，作为接口替代方案的临时解决方案。

el-cascader的数据调用

设置新增私有属性 (private_: {assField: ‘’},) 需要每个组件里面都添加(位置组件config.js)

// 选择型组件 【左面板】
export const selectComponents = [
  {
    __config__: {
      private_: {assField: ''},

新增控制层的代码

代码位置RightPanel.vue(可以使用全局搜索RightPanel找位置)

<el-form-item
   v-if="activeData.__config__.label!==undefined&&activeData.__config__.tag ==='el-cascader'"
   label="字段类型">
   <el-select
     v-model="activeData.__config__.private_.assField"
     placeholder="请选择字段类型"
     :style="{width: '100%'}"
     @change="assFieldChange"
   >
     <el-option
       v-for="item in config_.assField"
       :key="item.label"
       :label="item.label"
       :value="item.value"
     >
     </el-option>
   </el-select>
 </el-form-item>
 // js代码 this.static.config下的对应配置数组是提前放置的
assFieldChange (val) {
  console.log('val', val, this.a