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

1.效果2.实现<template><div class="board-column kanban todo" style="min-height:0;"><div class="board-column-header" style="background:#

曼_雨_馨_渼

10302人浏览 · 2018-06-29 18:42:28

曼_雨_馨_渼 · 2018-06-29 18:42:28 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^