后台返回json格式,前端设置下拉框或者选择
有些时候 前端需要动态的展示有后端传来的选项
例如下图中只有关联项目 + 采集时间是前端固定的 其他的都是有后端传来 咱们需要动态的渲染这个效果

请添加图片描述

	// 数据类型+数据名称是多选下拉的
 	<el-form-item
        v-for="item in selectsOption"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
      >
        <multiple-select
          v-model="formModel[item.prop]"
          :options="item.options"
          placeholder="默认为全部"
        />
      </el-form-item>



<div
      v-if="formOptions.length"
      class="formOptionsContainer"
    >
      <el-row
        v-for="item in formOptions"
        v-show="formDetailVisible"
        :key="item.prop"
      >
        <el-form-item
          :label="item.label"
          :prop="item.prop"
        >
          <checkbox-button-with-all
            v-model="formModel[item.prop]"
            :options="item.options"
          />
        </el-form-item>
      </el-row>
    </div>


const extraSelectOptionDictName: any[] = ['carriage', 'status']; // 对应的是多选下拉的key值 有后端返回 这个可以先和后端商量好


private async getFormOptions () {
    const dictMap: Dict[] = await Fetch.get('/api/web_json/searching_dict', { params: { scan_type: this.type } });
    if (dictMap.length) {
      this.selectsOption = [];
      const extraSelectOptionDictNameSet = new Set(extraSelectOptionDictName);

      const containsToOptions = (contains: Dict[] | undefined) => {
        if (!contains) {
          return [];
        }
        const options = contains.map((contain: Dict) => {
          return {
            // eslint-disable-next-line spellcheck/spell-checker
            label: contain.frontend,
            value: contain.backend
          };
        });
        return options;
      };

      const dictToFormOption = (dict: Dict) => {
        return {
          // eslint-disable-next-line spellcheck/spell-checker
          label: dict.frontend,
          prop: dict.backend,
          options: containsToOptions(dict.contains)
        };
      };

      (this.formOptions as Array<FormOptionModel | null>) = dictMap
        .map((item: Dict) => {
          if (extraSelectOptionDictNameSet.has(item.backend)) { // 如果是多选下拉 则给selectsOption push
            this.selectsOption.push(dictToFormOption(item)); 
            return null;
          }
          this.$set(this.formModel, item.backend, ['']); // 先默认都是全部
          return dictToFormOption(item);
        })
        .filter(x => x);
    }
  }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐