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

最新推荐文章于 2024-06-17 11:06:44 发布

AlexKain

最新推荐文章于 2024-06-17 11:06:44 发布

阅读量1.4k

点赞数 1

分类专栏：日常学习和储备[暂存区] vue 文章标签： Form Generator 调用接口接口替代方案

本文链接：https://blog.csdn.net/webfullstack/article/details/107868204

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"
     &g