element多选下拉框中实现全选、部分选择、全不选功能的两种方式

1、使用CheckBox
在el-select下拉框中增加el-checkBox选项，示例代码

<template>
    <div class="test">
        <el-select multiple
                   collapse-tags
                   v-model='selectedArray'
                   @change='changeSelect'
                   placeholder='请选择'>
            <el-checkbox v-model="checked"
                         :indeterminate="isIndeterminate"
                         @change='selectAll'>全选
            </el-checkbox>
            <el-option v-for='(item, index) in options'
                       :key='index'
                       :label='item.name'
                       :value='item.name'></el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    name: 'Migration', data() {
        return {
            isIndeterminate: false,
            checked: false,
            selectedArray: [],
            options: [
                { name: '一一', label: 'one' },
                { name: '二二', label: 'tow' },
                { name: '三三', label: 'three' },
                { name: '四四', label: 'four' },
                { name: '五五', label: 'five' }
            ]
        };
    },
    methods: {
        selectAll() {
            this.selectedArray = [];
            if (this.checked) {
                this.options.map((item) => {
                    this.selectedArray.push(item.name);
                });
                this.isIndeterminate = false;
            } else {
                this.selectedArray = [];
                this.isIndeterminate = false;
            }
        },
        changeSelect(val) {
            if (val.length === this.options.length) {
                this.checked = true;
                this.isIndeterminate = false;
            } else if (val.length && val.length < this.options.length) {
                this.checked = false;
                this.isIndeterminate = true;
            } else  {
                this.checked = false;
                this.isIndeterminate = false;
            }
        }
    }

};
</script>
<style lang="less"
       scoped>
.test {
    margin: 0 auto;
    width: 800px;
}
</style>

2、使用el-option

在el-select下拉框中增加el-option选项，示例代码
效果图：

<!-- 迁移任务 -->
<template>
    <div class="test">
        <el-select multiple
                   collapse-tags
                   v-model='selectedArray'
                   @change='changeSelect'
                   placeholder='请选择'>
            <el-option :class="[{'all': isIndeterminate === 'all'} , {'part':isIndeterminate === 'part'}, {'no': isIndeterminate === 'no' }]"
                       label="全选"
                       value="选项0">
            </el-option>
            <el-option v-for='(item, index) in options'
                       :key='index'
                       :label='item.label'
                       :value='item.value'></el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    name: 'Migration',
    data() {
        return {
            isIndeterminate: false,
            checked: false,
            selectedArray: [],
            oldSelectArray: [],
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ]
        };
    },
    computed: {
        allChecked() {
            return this.options.length === this.selectedArray.length;
        }
    },
    methods: {
        changeSelect(val) {
            let allValues = [];
            for (let item of this.options) {
                allValues.push(item.value);
            }
            allValues = ['选项0'].concat(allValues);
            const oldVal = this.oldSelectArray.concat([]);
            const oldInclude0 = oldVal.includes('选项0');
            const newInclude0 = val.includes('选项0');
            // 若是全部选择
            if (newInclude0) {
                this.selectedArray = allValues;
                this.isIndeterminate = 'all';
            }
            if (oldInclude0 && !newInclude0) {
                this.selectedArray = [];
                this.isIndeterminate = 'no';
            }
            if (oldInclude0 && newInclude0) {
                this.selectedArray = val;
                this.selectedArray = this.selectedArray.filter(d => d !== '选项0');
                this.isIndeterminate = 'part';
            }
            if (!oldInclude0 && !newInclude0) {
                if (val.length === allValues.length - 1) {
                    this.selectedArray = ['选项0'].concat(val);
                    this.isIndeterminate = 'all';
                } else if (!val.length) {
                    this.isIndeterminate = '';
                } else {
                    this.isIndeterminate = 'part';
                }
            }
            this.oldSelectArray = this.selectedArray;
        }
    }

};
</script>
<style lang="less"
       scoped>
.test {
    margin: 0 auto;
    width: 800px;
}
</style>
<style>
.el-select-dropdown.is-multiple .all.selected:after {
    content: "\e6da";
}

.el-select-dropdown.is-multiple .part:after {
    position: absolute;
    content: "\e6d8";
    right: 20px;
    font-family: element-icons;
    font-size: 12px;
    font-weight: 700;
    color: #5374c0;
}

.el-select-dropdown.is-multiple .no.selected:after {
    content: "''";
}

</style>