【vue】框架之el-select的全选

1.效果

2.实现

 
   <template>
 
  
 
   < 
   div 
   class= 
   "board-column kanban todo" 
   style= 
   "min-height:0;" 
   > 
  
 
   < 
   div 
   class= 
   "board-column-header" 
   style= 
   "background:#8bd4e0;" 
   >人员 
  
 
   < 
   el-select 
   v-model=" 
   choosePerson" 
   multiple 
   collapse-tags 
   placeholder= 
   "请选择" 
   style= 
   "width: 75%;border-radius: 20px;" 
   @change=' 
   selectAll' 
   > 
  
 
   < 
   el-option 
   v-for=" 
   item 
   in 
   selectOptions" 
   :key=" 
   item. 
   value" 
   :label=" 
   item. 
   label" 
   :value=" 
   item. 
   value" 
   ></ 
   el-option 
   > 
  
 
   </ 
   el-select 
   > 
  
 
   </ 
   div 
   > 
  
 
   </ 
   div 
   > 
  
 
     </ 
     template 
     > 
    
 
     < 
     script 
     > 
    

 
   export 
   default { 
  
 
   data() { 
  
 
   return { 
  
 
   selectOptions: [ 
  

    { 
   value: 
   'ALL_SELECT', 
   label: 
   'ALL' }, 
  

    { 
   value: 
   '1', 
   label: 
   'liablePerson1' }, 
  

    { 
   value: 
   '2', 
   label: 
   'liablePerson2' }, 
  

    { 
   value: 
   '3', 
   label: 
   'liablePerson3' }, 
  

    { 
   value: 
   '4', 
   label: 
   'liablePerson4' }, 
  

    { 
   value: 
   '5', 
   label: 
   'liablePerson5' } 
  

    ], 
  
 
   oldOptions: [], 
  
 
   choosePerson: [] 
   
 
  

        } 
  

      }, 
    
     methods: { 
    
 
           selectAll( 
       val) { 
      
 
       const 
       allValues 
       = [] 
      
 
       // 保留所有值 
      
 
       for ( 
       const 
       item 
       of 
       this. 
       selectOptions) { 
      
 
       allValues. 
       push( 
       item. 
       value) 
      

        } 
      
 
       // 用来储存上一次的值，可以进行对比 
      
 
       const 
       oldVal 
       = 
       this. 
       oldOptions. 
       length 
       === 
       1 
       ? 
       this. 
       oldOptions[ 
       0] 
       : [] 
      

 
       console. 
       log( 
       this. 
       oldOptions. 
       length) 
      
 
       console. 
       log( 
       val) 
      
 
       console. 
       log( 
       oldVal) 
      
 
       console. 
       log( 
       val. 
       includes( 
       'ALL_SELECT')) 
      
 
       console. 
       log( 
       oldVal. 
       includes( 
       'ALL_SELECT')) 
      

 
       // 若是全部选择 
      
 
       if ( 
       val. 
       includes( 
       'ALL_SELECT')) 
       this. 
       choosePerson 
       = 
       allValues 
      

 
       // 取消全部选中 上次有 当前没有 表示取消全选 
      
 
       if ( 
       oldVal. 
       includes( 
       'ALL_SELECT') 
       && 
       ! 
       val. 
       includes( 
       'ALL_SELECT')) 
       this. 
       choosePerson 
       = [] 
      

 
       // 点击非全部选中 需要排除全部选中 以及 当前点击的选项 
      
 
       // 新老数据都有全部选中 
      
 
       if ( 
       oldVal. 
       includes( 
       'ALL_SELECT') 
       && 
       val. 
       includes( 
       'ALL_SELECT')) { 
      
 
       const 
       index 
       = 
       val. 
       indexOf( 
       'ALL_SELECT') 
      
 
       val. 
       splice( 
       index, 
       1) 
       // 排除全选选项 
      
 
       this. 
       choosePerson 
       = 
       val 
      

        } 
      

 
       // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选 
      
 
       if ( 
       ! 
       oldVal. 
       includes( 
       'ALL_SELECT') 
       && 
       ! 
       val. 
       includes( 
       'ALL_SELECT')) { 
      
 
       console. 
       log( 
       11) 
      
 
       if ( 
       val. 
       length 
       === 
       allValues. 
       length 
       - 
       1) 
       this. 
       choosePerson 
       = [ 
       'ALL_SELECT']. 
       concat( 
       val) 
      

        } 
      

 
       // 储存当前最后的结果 作为下次的老数据 
      
 
       this. 
       oldOptions[ 
       0] 
       = 
       this. 
       choosePerson 
      

        } 
      

        } 
    
 
     } 
     
 
    
 
      </ 
      script 
      > 
     

 
   
 
  

关于vue框架之el-select的全选的实现，记录下来以便学习

参考1：https://www.cnblogs.com/sinosaurus/p/9047395.html

参考2：http://element.eleme.io/#/zh-CN/component/select

【vue】框架之el-select的全选

猜你喜欢