vue el-select全選、取消全選

<el-form-item label="區域：" prop="RegionIdArr">
                        <el-select v-model="model.RegionIdArr" @@change="regionChange()"
                                   multiple
                                   filterable
                                   placeholder="全部">
                            <el-option v-show="!regionAllChecked" label="選擇所有" value="all"></el-option>
                            <el-option v-show="regionAllChecked" label="取消所有" value="cancelAll"></el-option>
                            <el-option v-for="item in regionOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>


 clientAllChecked: false,

  regionChange() {
                    let self = this;
                    self.distributorOptions = new Array();
                    self.model.ClientArr = []; //清空經銷商選中
                    self.clientAllChecked = false;
                    self.storeOptions = new Array();
                    self.model.StoreArr = []; //清空門店選中
                    self.model.ExcludeStoreArr = []; //排除門店選中
                    self.storeAllChecked = false;

                    let regionAll = _.map(self.regionOptions, function(item) { return item.value; });

                    let regions = self.model.RegionIdArr;
                    console.log(regions, 'rgs')
                    //如果下拉框中了選擇所有，或非所有選項的其它項被選中,則勾選整個選項
                    var index = regions.indexOf('all');
                    var cancelIndex = regions.indexOf('cancelAll');
                    if (index > -1) {
                        //regions.splice(index, 1);
                        self.model.RegionIdArr = regionAll;
                        regions = regionAll;
                        self.regionAllChecked = true;

                    } else if (cancelIndex > -1) { //取消全選
                        //regions.splice(cancelIndex, 1);
                        self.model.RegionIdArr = [];
                        regions = [];
                        self.regionAllChecked = false;
                    } else if (index == -1 && cancelIndex == -1 && regionAll.length != self.model.RegionIdArr.length) {
                        self.regionAllChecked = false;
                    }
                    if (regions !== undefined && regions.length > 0) {
                        sa.ajax('/Memberships/ActivitySetting/DistributorOptions',
                            { regionsIds: regions },
                            function(res) {
                                if (res != null) {
                                    self.distributorOptions = res;
                                }
                            }.bind(this));
                    }
                },

 

 

參考：https://blog.csdn.net/maidu_xbd/article/details/105906600

https://www.jb51.net/article/166809.htm