vue+elementui實作el-select全選 反選

#vue實作-el-select多選全選 反選

實作的功能：

1、 多選

2、 選擇【全選】時多選資料及反選

3、 資料全部勾選時【全選】勾選，全選情況下去除一個選項【全選消失】

<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" />
           

用change控制每次勾選時的變化時間 removeTag移除tag時産生的方法

webAddresses: [
       {
         orgId: '全選',
         orgName: '全選'
       }
     ],// 周遊的select option 從後端周遊 
     newOrgData: [], // 勾選改變産生的舊資料
     orgData: [],//勾選最終資料
           

// 多選模式下移除tag時觸發,val為移除的tag值
   removeTag(val) {
     if (val === '全選') {
       this.orgData = []
     }
   },
   selectAll(val) {
     var end = val[val.length - 1]
     console.log('111===', this.orgData, val, this.newOrgData)
     //全選資料再反選使所有清空
     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
   },
           

結合了網上的版本做個總結記錄！！！