一、在data中声明变量

在这里插入图片描述

二、在methods中写获取后台数据,并且赋值给上边声明的变量areasDara

在这里插入图片描述

三、在mounted中调用areas方法,实现进页面后自动加载该方法获取后台数据

vue动态给select赋值option  动态生成option-第3张图片-爱制作

四、在option中写上for来循环刚才data中声明的变量

vue动态给select赋值option  动态生成option-第4张图片-爱制作

代码如下:

<a-form-item label="所属县区" :labelCol="labelCol" :wrapperCol="wrapperCol">
  <a-select v-decorator="[ 'areas', validatorRules.areas]"
            placeholder="请选择所属县区"
            @change="onChangeSelectAreas">
    <a-select-option v-for="(item,index)  in areasData" :value="item.id">{{item.areaName}}</a-select-option>
  </a-select>
</a-form-item>

效果如下:

在这里插入图片描述

本文地址: https://izhizuo.cn/post/141.html
文章来源: 不凡

Logo

前往低代码交流专区

更多推荐