vue加载的多选下拉框

怒摘一板 发布于 2017/12/15 10:12
阅读 6K+
收藏 1

最近写前端,需要一个实现可多选的下拉款,多选的功能是用bootstrap select组件实现的,但是这个组件用在固定option时可以正常加载成多选的形式,关键代码如下:

<label for="id_select"></label>
<select class="form-control selectpicker"  id="id_select" multiple>
   <option value="JDOnlineReport" selected>JD Online Report</option>
   <option value="offLine">offLine</option>
   <option value="Dashboard">Dashboard</option>
</select>

效果如图:

但是用在vue动态加载的option时,多选的效果却无法实现,部分代码:

<label v-bind:for="'s_'+select.selectId"></label>
<select v-bind:id="'s_'+select.selectId"  v-bind:name="select.selectName" class="form-control selectpicker" multiple>
    <option value="">Select Nothing</option>
    <option v-for="option in select.options">{{option.text}}</option>
</select>

产生效果如图:

因为小弟是写后台的,对于前端代码只是会用的水平。有没有同时懂得vue和bootstrap的朋友帮忙解答,一下这是什么原因造成的。或者提供一个可动态加载的支持vue的多选下拉框。万分感谢!

多选组件下载地址:http://www.jq22.com/jquery-info5428

加载中
0
窗外有个蓝蓝天
窗外有个蓝蓝天

这个跟js渲染的先后顺序有关吧,bootstrap要放在最后去渲染,先用vue把动态option的dom结构生成

0
杨教授的烈焰红唇
杨教授的烈焰红唇

去看一下iview吧,基于vue的UI组件库,国人出品,文档全,很方便

0
zn123
zn123

尽量不要把 这俩混一起

0
vikon
vikon

在vue的 mounted 后刷新一下看看

$(".selectpicker").selectpicker('refresh');

 

 

0
菲菲阮
菲菲阮

你应该在option标签里绑定值,像这样:value="option.text",就可以了

0
taCmoT
taCmoT

相比发明轮子,拼合轮子的难度更大一点!

返回顶部
顶部