Base-Stone基石系统动态下拉实现

以所属承运商下拉选项为例

下拉控件用el-select

<el-form-item label="所属承运商" prop="carrier">
  <el-select v-model="form.carrier" placeholder="请选择所属承运商">
    <el-option
      v-for="item in carrierOptions"
      :key="item.id"
      :value="item.carrierCode"
      :label="item.carrierCode+''+item.carrierName">
    </el-option>
  </el-select>
</el-form-item>

上述实现需要数组carrierOptions，value一般对应到Code，label显示CODE和NAME，有利于用户搜索；

定义全局变量carrierOptions

export default {
  name: "CarManage",
  components: {
  },
  data() {
    return {
      // 所属承运商下拉选项
      carrierOptions:[]
    }
  }
}  

mounted挂载时，调用方法getCarrierOptions

  mounted() {
      this.getCarrierOptions();
  },

vue方法getCarrierOptions调用JS方法getCarrierOptions

    /** 下拉查询所属承运商 **/
    getCarrierOptions(){
      getCarrierOptions().then((r) =>{
          this.carrierOptions = r.data
        }
      )
    },

JS方法getCarrierOptions请求/tms/carrier-manage/option

// 获得承运商下拉选项
export function getCarrierOptions() {
  return request({
    url: '/tms/carrier-manage/option',
    method: 'get'
  })
}

Controller层CarrierManageController中实现请求/tms/carrier-manage/option

    @GetMapping("/option")
    @ApiOperation("获得承运商下拉选项")
    public CommonResult<List<CarrierManageRespVO>> getCarrierOptions() {
        List<CarrierManageDO> list = carrierManageService.getCarrierManageList();
        return success(CarrierManageConvert.INSTANCE.convertList(list));
    }

Service层CarrierManageService中定义并实现方法getCarrierManageList

    /**
     * 获得承运商列表(无参数)
     *
     * @return 承运商管理列表
     */
    List<CarrierManageDO> getCarrierManageList();

    @Override
    public List<CarrierManageDO> getCarrierManageList() {
        return carrierManageMapper.selectList();
    }