integración selectpicker y vue

Artículo reimpreso:
cuadro de selección múltiple bootstrap-select e integración de Vue
https://blog.csdn.net/z_tankeer/article/details/90374992

Código clave de práctica personal:

• 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;
            }
        })
        

• Verifique el efecto:
  
  
  haga clic en Aceptar: verifique
  la consola:
  

Opciones de cambio:

mira la consola:

para resumir:

1: motivo de elección del selector de selección: ligeramente mejor que select2

2: Seleccionar para mostrar datos dinámicos requiere un conjunto de datos de reloj; de lo contrario, habrá espacios en blanco de datos

---

Terminar