记录 vue2 element-ui 实现一个 全选/取消全选的操作

记录 vue2 element-ui 实现一个下拉框 全选/取消全选的操作，废话不多说上代码，欢迎指点

// template
<el-select v-model="selectedOptions" multiple placeholder="请选择" @change="change">
    <el-option label="全选" value="all"></el-option>
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
</el-select>


// js data
data: {
    selectAll: false, // 记录上次是否是选择全部，
    options: [],
    selectedOptions: []
    
}

//methods
changeDevice(val){

    if(!this.selectAll) {
        // 上一次操作后，是未全选
        if(this.selectedOptions.includes('all')){
            // 选择了全部
            let security = this.options.map(option => option.id)
            this.selectedOptions = ['all', ...security]
            this.selectAll = true;
        } else if(this.selectedOptions.length == this.options.length){
            // 不包含全部,但是选择的数量达到了option长度,也就是全选了
            this.selectedOptions.unshift('all');
            this.selectAll = true;
        }else {
            // 选的其他,不操作
            this.selectAll = false;
        }
    } else {
        // 上一次操作后是全选
        if(this.selectedOptions.includes('all')) {
            // 因为添加全部，是追加到最前了，所以这里不用在查索引了，直接去掉最前面的一个值
            this.selectedOptions.shift();
        } else {
            this.selectedOptions = []
        }
        // 选中之后任何操作都是取消选中
        this.selectAll = false;
    }
},