selectpicker 与vue整合

àì夳堔傛蜴生んèń 2023-03-01 13:45 6阅读 0赞

### 文章目录 ###

*   *  总结:

转载文章:  
bootstrap-select多选框与Vue整合  
[https://blog.csdn.net/z\_tankeer/article/details/90374992][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;
                }
            })

*  看下效果:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]  
    点击确定:  
    看下控制台:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]

切换选项:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]  
看下控制台:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]

## 总结: ##

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

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

--------------------

完

[https_blog.csdn.net_z_tankeer_article_details_90374992]: https://blog.csdn.net/z_tankeer/article/details/90374992
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: /images/20230208/64c9b7c0aebe4561a60a7e576e03fe57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: /images/20230208/326ed584389940c9acfaf1035a079679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: /images/20230208/04ec498e1b7342f1937bdf61f62f4dac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200727063837271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200727063926352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70