jeecgboot 使用-1- 使用ApiSelect组件动态加载dict中的list

• 此系列为使用jeecgboot基础使用及遇到问题的解决方案, 供大家参考

版本: jeecgboot v3.5.1 vue3版

在系统管理->数据字段 页面中增加自己的字典数据

在form表单中使用api-select组件, 传入响应的参数

        <a-col :span="12">
          <a-form-item label="行业性质" v-bind="validateInfos.natureBusiness">
            <api-select v-model:value="formData.natureBusiness" placeholder="请选择行业性质" :api="queryNatureTypeList" params="nature_business" :immediate="true"></api-select>
          </a-form-item>
        </a-col>

其中queryNatureTypeList 是定义个请求dict的接口方法, nature_business 是dictCode的值,用于请求的参数

enum Api {
  queryNatureTypeList = `/sys/dict/getDictItems/`
}

export const queryNatureTypeList = (dictCode) => defHttp.get({url: Api.queryNatureTypeList + dictCode, params:{ dictCode }});

效果如下

ApiSelect组件不能使用placeholder问题

 <api-select v-model:value="formData.natureBusiness" placeholder="请选择行业性质" :api="queryNatureTypeList" params="nature_business" :immediate="true"></api-select>

动态请求后台接口的select不能使用placeholder, 加上之后导致无法下拉选择
解决方案:
在ApiSelect.vue文件的props中定义placeholder变量,接收该参数

  props: {
    value: [Array, Object, String, Number],
    placeholder: propTypes.string.def('请选择'),//接收传入的placeholder参数
    numberToString: propTypes.bool,
    api: {
      type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
      default: null,
    },
    // api params
    params: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
    // support xxx.xxx.xx
    resultField: propTypes.string.def(''),
    labelField: propTypes.string.def('label'),
    valueField: propTypes.string.def('value'),
    immediate: propTypes.bool.def(true),
    allowClear: propTypes.bool.def(true)
  },

<template>
  <Select @dropdownVisibleChange="handleFetch" v-bind="$attrs" @change="handleChange" :options="getOptions" v-model:value="state" :placeholder="placeholder" :allowClear="allowClear">
    <template #[item]="data" v-for="item in Object.keys($slots)">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
    <template #suffixIcon v-if="loading">
      <LoadingOutlined spin/>
    </template>
    <template #notFoundContent v-if="loading">
      <span>
        <LoadingOutlined spin class="mr-1"/>
        {{ t('component.form.apiSelectNotFound') }}
      </span>
    </template>
  </Select>
</template>

其实这个组件定义的变量还缺少很多,可根据自己需要添加更多定义

2023年5月19日