一.使用选择框动态加载后台数据

选择器 Select - Ant Design Vue (antdv.com)

1.先把页面效果做好，这个是静态数据

 2.页面代码

<template>
  <div>
    <a-card title="请根据需求进行选择">
    <a-row gutter="9">
        <a-col :span="12" >
    <a-tag color="green" style="font-weight:bold;height: 40px; line-height: 40px;">请选择线体</a-tag>
    <a-select label-in-value
    :default-value="{ key: 'lucy' }"
     style="width: 60%"
    @change="handleChange"
    size="large">
    <a-select-option value="jack">
       Jack (100)
    </a-select-option>
    <a-select-option value="lucy">
       Lucy (101)
    </a-select-option>
    </a-select>
     </a-col>
    <!-- 选择物料 -->
    <a-col :span="12" >
    <a-tag color="orange" style="font-weight:bold;height:40px;line-height:40px;">请选择包材种类</a-tag>
    <a-select label-in-value
    :default-value="{ key: 'lucy' }"
     style="width: 60%"
    @change="handleChange"
    size="large">
    <a-select-option value="jack">
       Jack (100)
    </a-select-option>
    <a-select-option value="lucy">
       Lucy (101)
    </a-select-option>
    </a-select>
    </a-col>
    </a-row>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinceData,
      cityData,
      cities: cityData[provinceData[0]],
      secondCity: cityData[provinceData[0]][0],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    },
  },
};
</script>

 二.接下来调用接口加载数据展示在选择框上面 

1.这个是物料后台数据接口

2.产线数据接口

  3.接下来，进行页面改造

 所有页面代码

<template>
  <div>
    <a-card title="请根据需求进行选择">
    <a-row :gutter="9">
        <a-col :span="12" >
    <a-tag color="green" style="font-weight:bold;height: 40px; line-height: 40px;">请选择线体</a-tag>
    <a-select label-in-value
    :default-value="{ key: '---选择---' }"
     style="width: 60%"
    @change="handleChangeLine"
    size="large" :disabled="disabled" option-label-prop="label">
    <a-select-option  v-for="item in packingBodys" 
       :key="item.lineid" :value="item.lineid" 
        :label="item.linebody" >
          <span role="img" :aria-label="item.linebody">
            {{item.linebody}}
          </span>
    </a-select-option>
    </a-select>
     </a-col>
    <!-- 选择物料 -->
    <a-col :span="12" >
    <a-tag color="orange" style="font-weight:bold;height:40px;line-height:40px;">请选择包材种类</a-tag>
    <a-select label-in-value  :default-value="{ key: '---选择---' }"
     style="width: 60%"
    @change="handleChangeName"
    size="large" :disabled="disabled" option-label-prop="label">
    <a-select-option  v-for="item in packingNames" 
       :key="item.id" :value="item.id" 
        :label="item.packingName" >
          <span role="img" :aria-label="item.packingName">
            {{item.packingName}}
          </span>
    </a-select-option>
    </a-select>
    </a-col>
    </a-row>
    <a-row type="flex" justify="end"> 
    <a-space>
        <a-col :span="12" >
        <a-button icon="redo" size="large" style="margin-top:20px;" :loading="iconLoading" @click="OnclickRefresh" >
        <a-badge status="success" >刷新</a-badge>
        </a-button>
        </a-col>
    </a-space>
    </a-row>   
    </a-card>
  </div>
</template>

<script>
import {MaterialNoApi} from '@/api/main'
import {MaterialLineBodyApi} from '@/api/main'
export default {
  data() {
    return {
       //选择框值
      select:{
        linebody:'',
        lineid:'',
        packingName:'',
        id:''
      },
     packingNames:[], //接收物料下拉框数据的对象
     packingBodys:[], //接收痴线下拉框数据的对象
     iconLoading: false,//加载状态
     disabled:false,//禁用状态
     DefaultValue:''//物料默认选中内容
    };
  },
  //页面加载完成后调用
  created (){
    this. AciPackingMaterialNo();
    this.AciPackagingMaterialCall();
  },
  methods: {
    handleChangeName(value) {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    },
    handleChangeLine(value) {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    },
    AciPackingMaterialNo(){
        MaterialNoApi('AciPackingMaterialNo').then(res => {
          if (res.code == 0) {
            var jsonobj= eval('(' +res.data + ')');//解析Json字符串
            if(jsonobj!=null){
              //解析json数组对象
              jsonobj.data.forEach(element => {
                          this.packingNames.push({
                            packingName:element.packingName,
                            id:element.id,
                            
                            })
                  });
            }else{
              description="接口出错了"
            }
        }
      }).catch(err => {
        console.log('包材物料查询接口err:', err)
      })
    },
    AciPackagingMaterialCall(){
        MaterialLineBodyApi('AciPackagingMaterialCall').then(res => {
          if (res.code == 0) {
            console.log("物料原始数据"+res.data);
            var jsonobj= eval('(' +res.data + ')');//解析Json字符串
            console.log("物料后台转换后的数据"+jsonobj);
            if(jsonobj!=null){
              //解析json数组对象
              jsonobj.data.forEach(element => {
                        console.log("物料开始解析"+element.linebody);
                          this.packingBodys.push({
                            linebody:element.linebody,
                            lineid:element.id,
                            })
                  });
            }else{
              description="接口出错了"
            }
        }
      }).catch(err => {
        console.log('包材线体名称查询接口err:', err)
      })
    },
    //刷新事件
    OnclickRefresh(){
      this.packingNames=[];
      this.packingBodys=[];
      this.AciPackingMaterialNo();
      this.AciPackagingMaterialCall();
      this.iconLoading = true;
      this.disabled=true;
      setTimeout(s=>{
       this.$message.success('数据已刷新');
       this.iconLoading = false;
       this.disabled=false;
      },2000);
    },
  },
};
</script>

4.效果：

 

参考文章(34条消息) 【Ant Design of Vue】【ant select】select动态加载(赋值)_小帅丶的专栏-CSDN博客_ant design select动态加载 

(34条消息) Ant Design vue使用组件select设置default-value_那年，那关心的博客-CSDN博客