selectpicker 与vue整合

转载文章:
bootstrap-select多选框与Vue整合
https://blog.csdn.net/z_tankeer/article/details/90374992

个人实践关键代码:

• html

 <div class="form-group">
      <div class="col-sm-2 control-label">推荐人id</div>
       <div class="col-sm-10">
           <select  class="tagSelect" data-live-search ="true" title="请选择"  v-model="recomEvaluation.recommenderId" >
               <option v-for="item in recommenderItems" :value="item.id">
                   {
   
   { item.name }}
               </option>
           </select>
       </div>
 </div>

• js

$(function () {
    
     

    $(".form_date").datetimepicker({
    
    
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy-mm-dd"
    });

    $(".form_datetime").datetimepicker({
    
    
        language: 'zh-CN',
        // weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        format: "yyyy-mm-dd hh:ii:ss"
    });

    $(".tagSelect").selectpicker();
});


var vm = new Vue({
    
    
    el: '#rrapp',
    data: {
    
    
        showList: true,
        title: null,
        recomEvaluation: {
    
    },
        recommenderItems: [
        ]
    },
    //监听部分
    watch: {
    
    
        /**
         * 监听后端的返回结果集
         */
        recommenderItems:function () {
    
    
            this.$nextTick(function () {
    
    
                $('.tagSelect').selectpicker('refresh');
            })
        },
 		saveOrUpdate: function (event) {
    
    
            console.log(vm.recomEvaluation);
            return;
            }
        })
        

• 看下效果:
  
  
  点击确定:
  看下控制台:
  

切换选项:

看下控制台:

总结:

1:selectpicker选择理由：比select2稍微好看点

2：select的显示动态数据需要watch数据集，不然会出现数据空白

---

完