view Select 实现全选、反选、取消

<template>
  <Row>
    <Col style="padding-right:10px">
  <Select v-model="model" multiple style="width:260px" @change="changeSelect" @remove-tag="removeTag">
      <Button :value="'全选'" :key="'全选'" @click.native="checkedAll" type="primary" size="small" style="margin-left: 10px;"> 全选</Button>
      <Button :value="'反选'" :key="'反选'" @click.native="checkedFan" type="success" size="small" style="margin-left: 10px;"> 反选</Button>
      <Button :value="'取消'" :key="'取消'" @click.native="unChecked" type="dashed" size="small" style="margin-left: 10px;"> 取消</Button>
    <Option v-for="item in cityList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
  </Select>
  <div><p>已选择：{{model}}</p></div>
    </Col>
  </Row>
</template>
<script>
export default {
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      // 是否全选
      isCheckAll: false,
      // 是否反选
      isCheckInverse: false,
      model: [],
      click:{},
    }

  },
  methods : {

    // 全选/取消全选
    checkedAll () {
      if (this.model.length < this.cityList.length){
        this.model = [];
        this.cityList.map((item) =>{
          this.model.push(item.label)
        })
        //this.model.unshift('全选')
      }else {
        this.model = [];
      }
    },
    checkedFan () {
        let model2 = [];
        for(let mm of this.cityList){
          if (this.model.indexOf(mm.label) === -1){
            model2.push(mm.label)
          }
        }
      this.model = [];
      this.model=model2;
    },
    unChecked () {
      this.model = [];
    },
    changeSelect (val){
      if(!val.include('全选') && val.length === this.cityList.length){
        this.model.unshift('全选')
      }else if (val.include('全选') && (val.length - 1) < this.cityList.length){
        this.model = this.model.filter((item) => {
          return item !== '全选'
        })
      }
      if(!val.include('反选') ||  val.length === this.cityList.length){
        this.model.unshift('反选')
      }else if (val.include('反选')){
        this.model = this.model.filter((item) => {
          return item !== '反选'
        })
      }
    },
    removeTag (val){
      if (val === '全选'){
        this.model = [];
      }
    }
  }
}
</script>

效果图展示：