el-select和el-checkBox实现下拉菜单全选功能

el-select 和 el-checkbox 实现下拉菜单全选功能

示例代码：

<el-select
    popper-class="select-container"
    v-model="ids"
    placeholder="请选择目标"
    :multiple-limit="20"
    multiple
    filterable
    collapse-tags
    class="wd400"
    size="medium"
    >
    <el-option disabled :value="-1" v-if="optionList.length > 1">
        <el-checkbox
            v-model="allCheck"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
         >全选</el-checkbox>
    </el-option>
    <el-option
        v-for="item in optionList"
         key="item.id"
        :label="item.name"
        :value="item.id"
        disabled
        >
        <el-checkbox-group
            v-model="ids"
            @click.native.stop=""
            @change="handleCheckedChange"
            >
            <el-checkbox :label="item.id">
                <span class="elk-option">
                    {{ item.name }}
                </span>
            </el-checkbox>
        </el-checkbox-group>
    </el-option>
</el-select>

data:

data() {
    return {
        ids:[],
        optionList:[
            {id:1, name:"目标1"},
            {id:2, name:"目标2"},
            {id:3, name:"目标3"},
            {id:4, name:"目标4"}
        ],
        allCheck: false,
        isIndeterminate: false,
    }
}

方法：

// 目标选择
handleCheckedChange(value) {
    let checkedCount = value.length;
    let allCount = this.optionList.length;
    this.allCheck = checkedCount === allCount;
    this.isIndeterminate = checkedCount > 0 && checkedCount < allCount;
},

// 目标多选
handleCheckAllChange(val) {
    // console.log(val)
    this.ids = val ? this.optionList.map(item=>{
        return item.id
    }) : []
    this.isIndeterminate = false;
}

样式：

.select--container {
  .el-select-dropdown__item {
    .el-checkbox {
      display: flex;
      align-items: center;
      height: 40px;
    }

    &.is-disabled {
      cursor: auto !important;
    }

    &:hover {
      background: #fff !important;
    }

    &.selected {
      &.hover {
        background: #F5F7FA !important;
      }
    }
  }
}

效果如下图所示：