扫码关注官方订阅号
报表查询 本方机构类型 {{ option.text }} 查询
本方机构类型 {{ option.text }}
刚开始学VueJs1.使用了bootstrap的下拉多选框,点查询按钮后,下拉多选的下拉枚举值没有随着绑定好2.替换为自带的select,就可以绑定成功。。。。
人生最曼妙的风景,竟是内心的淡定与从容!
bootstrap select 初始化之后,会将 select 变成下面这样的结构:
<p class="btn-group bootstrap-select show-tick form-control"> <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="selfEntityType" title="Nothing selected" aria-expanded="false"><span class="filter-option pull-left">Nothing selected</span> <span class="bs-caret"><span class="caret"></span></span> </button> <p class="dropdown-menu open" style="max-height: 891px; overflow: hidden; min-height: 0px;"> <ul class="dropdown-menu inner" role="menu" style="max-height: 879px; overflow-y: auto; min-height: 0px;"> <li src-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text"> 基金 </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li src-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text"> 商业公司 </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li src-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text"> 银行 </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> </ul> </p> <select id="selfEntityType" class="selectpicker show-tick form-control" multiple="" tabindex="-98"> <option value="A"> 基金 </option> <option value="B"> 商业公司 </option> <option value="C"> 银行 </option> </select> </p>
原来的 select 被移到这个 p 里面,并且样式被设置为 display: none修改数组会修改已被隐藏的 select,不能自动刷新 bootstrap select,需要调用 bootstrap select 的 selectpicker 的 refresh 方法,注意在 Vue.nextTick 中调用。
Search: function() { this.selfEntityTypeSelectArray = [{ text: '基金', value: 'A' }, { text: '商业公司', value: 'B' }]; Vue.nextTick(function () { $('#selfEntityType').selectpicker('refresh'); }); }
此外,如果是按组件的方式开发,不要使用 #id 选择子进行元素选择,可以使用 $el.querySelector 或者 ref 特殊属性(用于Vue.js 2.0),或者 v-el 指令。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
bootstrap select 初始化之后,会将 select 变成下面这样的结构:
原来的 select 被移到这个 p 里面,并且样式被设置为 display: none
修改数组会修改已被隐藏的 select,不能自动刷新 bootstrap select,需要调用 bootstrap select 的 selectpicker 的 refresh 方法,注意在 Vue.nextTick 中调用。
此外,如果是按组件的方式开发,不要使用 #id 选择子进行元素选择,可以使用 $el.querySelector 或者 ref 特殊属性(用于Vue.js 2.0),或者 v-el 指令。