select选择框选择全部和选择单个之间的逻辑实现代码

select选择框选择全部和选择单个之间的逻辑实现代码

<template>
  <div>
 <el-form>
            <el-form-item>
                <el-select  placeholder="请选择活动区域" multiple v-model="citys">
                    <el-option label="选择所有" value="all"></el-option>
                    <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
          </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        cities: [
                    {value: 'Beijing',label: '北京'}, 
                    {value: 'Shanghai',label: '上海'}, 
                    {value: 'Nanjing',label: '南京'}, 
                    {value: 'Chengdu',label: '成都'}, 
                    {value: 'Shenzhen',label: '深圳'}, 
                    {value: 'Guangzhou',label: '广州'}
                ],
        citys:[]
      }
    },
    methods: {
    },
    watch:{
                citys:function(val,oldval){
                    let newindex =  val.indexOf('all'),oldindex =  oldval.indexOf('all');   //获取val和oldval里all的索引,如果没有则返回-1
                    if(newindex!=-1 && oldindex==-1 && val.length>1)                       //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
                        this.citys=['all'];
                    else if(newindex!=-1 && oldindex!=-1 && val.length>1)                 //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有
                        this.citys.splice(val.indexOf('all'),1)                    
                }
            }
  }
</script>