此处应注意selectpicker与vue的渲染顺序与层级,对于bootstrap而言7之前的modal是无法展示selectpicker的。
VUE:v-if
并未将元素渲染在页面上,当使用v-if后想要后置渲染数据需要重新呈现selectpicker-ui
$('.selectpicker').selectpicker('render');
注意:配合modal或元素为数组使用时,渲染顺序分别为:
1.修改vue data数据,强制重新渲染
this.$forceUpdate();
2.如果此处使用异步拉取数据,vue数据变化后应当延迟渲染selectpicker
setTimeout(()=>{
$(".selectpicker").selectpicker('render');
},500);
VUE:v-show
数据已经渲染在页面上,刷新selectpicker-ui即可
同上方顺序一致render改为refresh
$(".selectpicker").selectpicker('refresh');
VUE绑定selectpicker默认值通过v-model即可,JS操作selectpicker,使用$(".selectpicker").selectpicker('val',val);
第二个val为数组,如不指定第二个参数则为获取其值

本文探讨了Vue中使用Selectpicker组件时遇到的兼容性和渲染问题,并提供了详细的解决方案,包括如何根据不同情况选择合适的渲染方法。
407

被折叠的 条评论
为什么被折叠?



