element-UI下拉框添加全选（V2）_element select下拉框全选

V2版本不像V3中那样，有自定义下拉菜单的头部，V2只能自己慢慢的写，还是挺麻烦的，写不好还会有各种问题，在这里我把我常用的的增加全选的实现方案总结一下。

方案一

在下拉菜单的头部添加一个全选的选项，如下图：

我个人并不喜欢这种方案，如图，全选时会多一个选中的tag ，只要不嫌麻烦，可能也有办法处理，太过复杂，就不说怎么处理了。

先说一下这种方案的实现逻辑：

1. 在select 的第一项添加一个全选option ，添加click事件用来添加全选、反选逻辑；
2. 在select 上添加tag移除事件，如果移除的是Select All，则清空选择数组；
3. 在select 上添加change移除事件，如果val中不包含Select All，则options已全部选择了，这时要在选择数组前面添加Select All；如果val中包含Select All，这时选择数组要去除Select All，按照事件执行顺序，会再去执行this.selectAll()；

<template>
  <el-select
    filterable
    v-model="selectList"
    collapse-tags
    multiple
    clearable
    @remove-tag="e => removeTag(e)"
    @change="e => changeSelect(e)"
  >
    <el-option
      label="全选"
      value="Select All"
      key="selectAll"
      @click.native="() => selectAll()"
    ></el-option>
    <el-option
      v-for="item in optionsList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectList: [],
      optionsList: [
        {
          value: 'Beijing',
          label: '北京'
        },
        {
          value: 'Shanghai',
          label: '上海'
        },
        {
          value: 'Nanjing',
          label: '南京'
        },
        {
          value: 'Chengdu',
          label: '成都'
        },
        {
          value: 'Shenzhen',
          label: '深圳'
        },
        {
          value: 'Guangzhou',
          label: '广州'
        }
      ]
    };
  },
  methods: {
    selectAll() {
      let resValues = this.optionsList.map(item => item.value);
      let selectValues = this.selectList.filter(item => item !== 'Select All');
      // 如果选择的长度等于 options 的长度就是反选，需要清空选择数组
      if (selectValues.length >= resValues.length) {
        this.selectList = [];
      } else {
        // 如果选择的长度小于 options 的长度就是全选，就要把选择数组前面添加 Select All
        let res = ['Select All', ...resValues];
        this.selectList = res;
      }
    },
    removeTag(val) {
      // 如果移除的是Select All，则清空选择数组
      if (val === 'Select All') {
        this.selectList = [];
      }
    },
    changeSelect(val) {
      let resValues = this.optionsList.map(item => item.value);
      // 如果val中不包含Select All，则options已全部选择了，这时要在选择数组前面添加Select All
      if (!val.includes('Select All') && val.length === resValues.length) {
        this.selectList.unshift('Select All');
      } else if (
        val.includes('Select All') &&
        val.length - 1 < resValues.length
      ) {
      	// 如果val中包含Select All，这时选择数组要去除Select All，按照事件执行顺序，会再去执行this.selectAll();
        this.selectList = val.filter(item => {
          return item !== 'Select All';
        });
      }
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

方案二

在下拉菜单的头部添加全选复选框，如下图：

说一下这种方案的实现逻辑：

1. 在select 的第一项添加一个全选checkbox ，添加change事件用来添加全选、反选逻辑，如果checkbox为true，则为全选，选择数组添加所有数据；如果checkbox为false，则为反选，选择数组为空；
2. 如果选择数组长度等于options的长度，checkbox设为true，反之设为false；

<template>
  <el-select
    filterable
    v-model="selectList"
    collapse-tags
    multiple
    clearable
    @change="e => changeSelect(e)"
  >
    <div class="checkboxWrapper">
      <el-checkbox v-model="checked" @change.native="checkChange">
        全选
      </el-checkbox>
    </div>
    <el-option
      v-for="item in optionsList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      selectList: [],
      optionsList: [
        {
          value: 'Beijing',
          label: '北京'
        },
        {
          value: 'Shanghai',
          label: '上海'
        },
        {
          value: 'Nanjing',
          label: '南京'
        },
        {
          value: 'Chengdu',
          label: '成都'
        },
        {
          value: 'Shenzhen',
          label: '深圳'
        },
        {
          value: 'Guangzhou',
          label: '广州'
        }
      ]
    };
  },
  methods: {
    checkChange(e) {
      let resValues = this.optionsList.map(item => item.value);
      // 如果checkbox为false，则为反选，选择数组为空
      if (!e) {
        this.selectList = [];
      } else {
      	// 如果checkbox为true，则为全选，选择数组添加所有数据
        let res = [...resValues];
        this.selectList = res;
      }
    },
    changeSelect(val) {
      let resValues = this.optionsList.map(item => item.value);
      // 如果选择数组长度等于options的长度，checkbox设为true，反之设为false
      if (val.length === resValues.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.selectList = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.checkboxWrapper {
  padding: 8px 20px;
  border-bottom: 1px solid #ccc;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

总结

通过上述两种方案逻辑的比较，方案二明显简单了很多，无论是代码还是逻辑多简单，不至于出现先执行change，再去执行click，的问题。避免出现不必要的bug。