vue动态给select赋值option 动态生成option

不凡 3258 0

一、在data中声明变量

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

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

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

三、在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>

效果如下:

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

标签: vue

上一篇layui在table中点击图片可弹出预览图

下一篇当前分类已是最新一篇

发布评论 0条评论)

  • Refresh code

还木有评论哦,快来抢沙发吧~