vue2中，下拉框多选和全选的实现

如图所示点击全选即可完成下拉框中全部子项的全部的选中，同时取消全选即可全部取消选择。

代码布局

  <div class="chos-box2">
              <span>屏蔽策略名称</span>：
              <el-select
                v-model="cluster_nameArr"
                filterable
                size="small"
                multiple
                placeholder="多选(可全选)"
                collapse-tags="collapseTags"
                clearable
                @change="searchDataHA"
              >
                <el-option
                  label="全选"
                  value="全选"
                  @click.native="selectAllHA"
                  v-if="options4.length"
                ></el-option>
                <el-option
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
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

相关的el参数可以查询，

在methods: 中添加功能函数

method：{
 searchDataHA(val) {
      if (!val.includes("全选") && val.length === this.options4.length) {
        this.cluster_nameArr.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options4.length
      ) {
        this.cluster_nameArr = this.cluster_nameArr.filter((item) => {
          return item !== "全选";
        });
      }


      this.page = 1;
      this.getConfigData();//用来请求数据的函数
    },
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

较为完整的一个整体代码：

<template>
<div class="chos-box2">
              <span>屏蔽策略名称</span>：
              <el-select
                v-model="cluster_nameArr"
                filterable
                size="small"
                multiple
                placeholder="多选(可全选)"
                collapse-tags="collapseTags"
                clearable
                @change="searchDataHA"
              >
                <el-option
                  label="全选"
                  value="全选"
                  @click.native="selectAllHA"
                  v-if="options4.length"
                ></el-option>
                <el-option
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            </template>
            <script>
 export default {
  data() {
  // 已选中选项
      mulSelecteds: {
        type: Array,
        default() {
          return [];
        },
      },
      collapseTags: {
        type: Boolean,
        default: true,
      },}
      method：{
 searchDataHA(val) {
      if (!val.includes("全选") && val.length === this.options4.length) {
        this.cluster_nameArr.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options4.length
      ) {
        this.cluster_nameArr = this.cluster_nameArr.filter((item) => {
          return item !== "全选";
        });
      }
      this.page = 1;
      this.getConfigData();//用来请求数据的函数
    },
     selectAllHA() {
      if (this.cluster_nameArr.length < this.options4.length) {
        this.cluster_nameArr = [];
        this.options4.map((item) => {
          this.cluster_nameArr.push(item);
        });
        this.cluster_nameArr.unshift("全选");
      } else {
        // 取消全选
        this.cluster_nameArr = [];
      }
      console.log("全选", this.checked, this.options2, this.selectedArr);
    },},
    

     watch: {//用来监听变量
    mulSelecteds: {
      handler(newVal, oldVal) {
        this.selectedArr = newVal;
        if (
          !this.selectedArr.includes("全选") &&
          this.selectedArr.length &&
          this.selectedArr.length === this.options2.length
        ) {
          this.selectedArr.unshift("全选");
        }
      },

      immediate: true,
    },
  },
      }

</script>
<style lang="scss" scoped>
  .chos-box2 {
            margin-right: 25px;
            span {
              display: inline-block;
              width: 115px;
            }
          }
</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
90
91
92
93
94
95
96
97
98
99
100
101

}