el-select 支持全选，多选，自定义搜索全选

前端钓鱼人

已于 2023-06-21 14:20:35 修改

阅读量1.5k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-21 14:02:09 首次发布

本文链接：https://blog.csdn.net/m0_55558279/article/details/131326423

版权

文章展示了如何在Vue.js应用中使用el-select组件来实现全选、多选功能，并结合自定义搜索功能。通过v-model、filterable、multiple等属性配置，以及handleSelect、handleCheckAllChange等方法处理选中状态和数据过滤。同时，利用el-checkbox进行全选控制，实现选中项的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select 支持全选，多选，自定义搜索全选

1. 成品展示

在这里插入图片描述

2. body部分

    <el-select
      v-model="channels"
      filterable
      collapse-tags
      multiple
      reserve-keyword
      cleara`在这里插入代码片`ble
      @change="handleSelect"
      @visible-change="selectSeeChannel"
      :filter-method="filter"
      placeholder="请选择客服"
      class="mr10 w240"
    >
      <div style="padding: 0 20px; line-height: 34px">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </div>
      <el-checkbox-group v-model="channels">
        <el-option v-for="item in miniAppChannels" :label="item.label" :value="item.value">
          <el-checkbox style="pointer-events: none" :label="item.value">{{ item.label }}</el-checkbox>
        </el-option>
      </el-checkbox-group>
    </el-select>

3.data 部分

 data() {
            return {
                checkAll: false, //招标阶段 是否全选
                isIndeterminate: false, //全选复选框标识 
                timer: null,
                miniAppChannels: [],
                miniAppChannelsAll:[],
                channels: [],          
                 }
        },

4.js 部分

     // 下拉框选择事件
     handleSelect(value) {
         let filterArray = []
         let arr = value || []
         filterArray = this.miniAppChannels.filter(function(item) {
             return arr.indexOf(item.value) != -1
         });
         this.checkAll = filterArray.length === this.miniAppChannels.length;
         this.isIndeterminate = filterArray.length > 0 && filterArray.length < this.miniAppChannels.length;
     },
     // 全选事件
     handleCheckAllChange(val) {
         const data = this.miniAppChannels.map(item => {
             return item.value
         })
         let arr = []
         let newArray = []
         if(val == true){
             arr = Array.from(new Set([...this.channels,...data]))
         }else{
             newArray = this.channels.filter(function(item) {
                 return data.indexOf(item) == -1
             });
         }
         this.channels = val?arr:newArray
         this.isIndeterminate = false;
     },
     // 打开隐藏下拉框事件
     selectSeeChannel(e){
         if(e == false){
             this.filter('')
         }
     },
     //自定搜索，加上防抖
     filter(v) {
         clearTimeout(this.timer);
         this.timer = setTimeout(() => {
             console.log("vvv" ,v);
             //对绑定数据赋值
             this.miniAppChannels = this.miniAppChannelsAll.filter((item) => {
                 //如果直接包含输入值直接返回true
                 if (item.label.indexOf(v) !== -1) return true;
             })
             let filterArray = []
             let arr = this.channels || []
             filterArray = this.miniAppChannels.filter(function(item) {
                 return arr.indexOf(item.value) != -1
             });
             if(filterArray.length == this.miniAppChannels.length){
                 this.checkAll = true
                 this.isIndeterminate = false
             }else{
                 this.checkAll = false
                 if(filterArray.length > 0){
                     this.isIndeterminate = true
                 }else{
                     this.isIndeterminate = false
                 }
             }
         }, 300); // 设置时间
     },