ElementPlus 之 el-select 多选实现全选功能

前言

经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。

一、示例代码

（1）/src/views/Example/ElSelect/index.vue

<template>
  <div class="index">
    <el-select
      size="small"
      placeholder="请选择游戏"
      value-key="id"
      style="width: 100%"
      multiple
      filterable
      clearable
      collapse-tags
      :reserve-keyword="false"
      collapse-tags-tooltip
      v-model="gameParam.gameSelectedList"
      @remove-tag="handleGameItemRemove"
    >
      <el-option
        v-for="item in gameParam.gameList"
        :key="item.id"
        :label="item.name"
        :title="item.name"
        :value="item"
        @click="handleGameItemClick(item)"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { h, onMounted, onUnmounted, ref, getCurrentInstance, reactive, watch, nextTick } from 'vue'
 
// 代理对象
const { proxy } = getCurrentInstance()

// 游戏参数
const gameParam = reactive({
  // 选中的游戏对象列表
  gameSelectedList: [],
  
  // 游戏列表
  gameList: [
    { 'id': 0, 'name': '全选' },
    { 'id': 1, 'name': '梦幻西游' },
    { 'id': 2, 'name': '暗黑破坏神2' },
    { 'id': 3, 'name': '国家崛起2' },
    { 'id': 4, 'name': '侠盗猎车手圣安地列斯' },
    { 'id': 5, 'name': '月影传说' },
    { 'id': 6, 'name': '地下城守护者2' },
  ],
})

/**
 * 游戏改变事件句柄方法
 */
const handleGameItemClick = (item) => {
  console.log('item =>', item)

  // 当点击“全选”选项时
  if (item.name == '全选') {
    // 判断“已选列表”是否包含“全选”
    let isContain = false
    for (let vo of gameParam.gameSelectedList) {
      if (vo.name == item.name) {
        isContain = true
      }
    }
    console.log('isContain =>', isContain)

    if (isContain) {
      // 若包含“全选”，则全部选中
      gameParam.gameSelectedList = gameParam.gameList
    } else {
      // 若不包含“全选”，则全部不选中
      gameParam.gameSelectedList = []
    }
  }
  // 当点击其它选项时
  else {
    // 判断“已选列表”是否包含“全选”
    const index = gameParam.gameSelectedList.findIndex(
      (item) => item.name === '全选'
    )
    if (index != -1) {
      console.log(gameParam.gameSelectedList.length)
      console.log(gameParam.gameList.length)
      if ((gameParam.gameSelectedList.length + 1) <= gameParam.gameList.length) {
        gameParam.gameSelectedList.splice(index, 1)
      }
    } else {
      console.log(gameParam.gameSelectedList.length)
      console.log(gameParam.gameList.length)
      if ((gameParam.gameSelectedList.length + 1) == gameParam.gameList.length) {
        gameParam.gameSelectedList.push(
          {
            'id': 0,
            'name': '全选'
          }
        )
      }
    }
  }
}

/**
 * 单个移除标签
 */
const handleGameItemRemove = (item) => {
  console.log('item =>', item)

  // 当点击“全选”选项时
  if (item.name == '全选') {
    // 判断“已选列表”是否包含“全选”
    let isContain = false
    for (let vo of gameParam.gameSelectedList) {
      if (vo.name == item.name) {
        isContain = true
      }
    }
    console.log('isContain =>', isContain)

    if (isContain) {
      // 若包含“全选”，则全部选中
      gameParam.gameSelectedList = gameParam.gameList
    } else {
      // 若不包含“全选”，则全部不选中
      gameParam.gameSelectedList = []
    }
  }
  // 当点击其它选项时
  else {
    // 判断“已选列表”是否包含“全选”
    const index = gameParam.gameSelectedList.findIndex(
      (item) => item.name === '全选'
    )
    if (index != -1) {
      console.log(gameParam.gameSelectedList.length)
      console.log(gameParam.gameList.length)
      if ((gameParam.gameSelectedList.length + 1) <= gameParam.gameList.length) {
        gameParam.gameSelectedList.splice(index, 1)
      }
    } else {
      console.log(gameParam.gameSelectedList.length)
      console.log(gameParam.gameList.length)
      if ((gameParam.gameSelectedList.length + 1) == gameParam.gameList.length) {
        console.log(1111)
        gameParam.gameSelectedList.push(
          {
            'id': 0,
            'name': '全选'
          }
        )
      }
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  width: auto;
  height: 100%;
  padding: 0 100px;
  display: grid;
  align-items: center;
  text-align: center;
  background-color: #fafafa;
}
</style>

二、运行效果