【vue】element-ui select结合checkbox实现全选和反选_vue 实现el-select加checkbox

在有些项目中会出现，select与checkbox的结合体，有的时候还需要全选与反选的功能，效果如下：

在实现上，省份选择的checkbox是用css样式写的，因为用element-ui的checkbox十分难以实现，所以就用css样式，但是在全选按钮上，是可以直接用el-checkbox控制true或者false，这就很好控制。

代码如下：

<template>
  <div style="font-size: 14px; width: 50%;margin: 0 auto;">
    <p>选择的省份：{{provinceType.join('，')}}</p>
    <el-select
      class="pop_select"
      size="mini"
      v-model="provinceType"
      multiple
      placeholder="请输入/选择省市名称"
      filterable
      collapse-tags
      popper-class="pop_select_down"
      @change="selectCheck"
    >
      <el-checkbox v-model="isSelectAll" style="padding-left:18px" @change="selectAll">全选</el-checkbox>
      <el-option v-for="item of provinceData" :label="item" :value="item" :key="item">
        <span class="check" />
        <span>{{item}}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      provinceType: [],
      isSelectAll: false,
      provinceData: [
        "北京市",
        "广东省",
        "山东省",
        "江苏省",
        "河南省",
        "上海市",
        "河北省",
        "浙江省",
        "陕西省"
      ]
    };
  },
  methods: {
    selectAll(val) {
      this.provinceType = val ? this.provinceData : [];
    },
    selectCheck(val) {
      if (val.length === this.provinceData.length) {
        this.provinceType = this.provinceData;
        this.isSelectAll = true;
      } else {
        this.isSelectAll = false;
      }
    }
  }
};
</script>

<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  left: 1.25rem;
  z-index: 1;
  color: #fff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
  background-color: #409eff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check {
  display: inline-block;
  position: relative;
  border: 1px solid #409eff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
  margin-right: 10px;
  transition: border-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46);
}
</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