el-select 下拉全选反选

<template>
 <div class="configure">
    <el-select
       v-model="orgData"
       size="small"
       multiple
       collapse-tags
       @change="selectAll"
       @remove-tag="removeTag">
     <el-option
       v-for="item in webAddresses"
       :key="item.orgId"
       :label="item.orgName"
       :value="item.orgId" />
    </el-select>

  </div>
</template>

<script>
export default {
  name: 'configure.veu',

  data() {
    return {
      webAddresses: [
         {
           orgId: '全选',
           orgName: '全选'
         },  {
          orgId: '选项0',
          orgName: '全部'
        },
        {
          orgId: '选项1',
          orgName: '黄金糕'
        },

       ],// 遍历的select option 从后端遍历
       newOrgData: [], // 勾选改变产生的旧数据
       orgData: [],//勾选最终数据
}
  },
  methods: {

 // 多选模式下移除tag时触发,val为移除的tag值
   removeTag(val) {
     console.log(val,'----------')
     if (val === '全选') {
       this.orgData = []
     }
   },
   selectAll(val) {
     var end = val[val.length - 1]
     console.log('111===', this.orgData, val, this.newOrgData, end)
     //全选数据再反选使所有清空
     if (this.newOrgData.includes('全选') && !val.includes('全选') && val.length + 1 === this.webAddresses.length) {
       val = []
       this.orgData = []
     }
     //当所有数据都选择了使勾选上【全选】
     if (!val.includes('全选') && val.length + 1 === this.webAddresses.length) {
       val.unshift('全选') //在val开头插入【全选】
     } else if (val.includes('全选') && val.length === 1) { //直接勾选【全选】
       val = []
       this.webAddresses.map(item => {
         val.push(item.orgId)
       })
     } else if (val.includes('全选') && val.length - 1 < this.webAddresses.length && end === '全选') {
     //点击选择其他元素后再选择【全选】
       val = []
       this.webAddresses.map(item => {
         val.push(item.orgId)
       })
     } else if (val.includes('全选') && val.length - 1 < this.webAddresses.length) {
        //全选后再点击取消掉其他元素
       val = val.filter(item => {
         return item !== '全选'
       })
     }
     // 注意,加上  this.value = val,确保勾选值同步
     this.orgData = val
     this.newOrgData = val
   },

  }
}
</script>