系统管理-通知管理select多选

src/views/system/notifyManage/index.vue

@@ -53,14 +53,14 @@
               <textarea v-model="sendForm.notification" cols="38" rows="6" />
             </el-form-item>
             <el-form-item label="推送对象" prop="pushObj">
-              <div class="push">
-                <label><input v-model="sendForm.pushObj" type="radio" name="push" value="用户"><span>用户</span></label>
-                <label><input v-model="sendForm.pushObj" type="radio" name="push" value="设备"><span>设备</span></label>
-              </div>
+              <el-radio-group v-model="sendForm.pushObj" @change="pushObjChange">
+                <el-radio label="用户">用户</el-radio>
+                <el-radio label="设备">设备</el-radio>
+              </el-radio-group>
             </el-form-item>
             <el-form-item label="选择对象" prop="paramName">
-              <el-select v-model="sendForm.sendObj" multiple clearable placeholder="请选择" style="width:315px" @change="handelChange">
-                <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
+              <el-select ref="selectBox" v-model="selectOptions" multiple :collapse-tags="showTags" clearable placeholder="请选择" style="width:315px" @change="changeSelect">
+                <el-option key="全选" label="全选" value="全选" />
                 <el-option v-for="item in sendObjOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
@@ -111,7 +111,9 @@ export default {
         { value: '1', label: '设备1' },
         { value: '2', label: '设备2' },
         { value: '3', label: '设备3' }
-      ]
+      ],
+      selectOptions: [],
+      showTags: false
     }
   },
   computed: {
@@ -164,8 +166,47 @@ export default {
         this.sendForm.sendObj = []
       }
       // console.log(this.sendForm.sendObj)
+    },
+    // el-select 选中值发生变化时触发，val为目前选中的值
+    changeSelect(val) {
+      // 最后选中得值
+      var endSelectVal = val[val.length - 1]
+      // showTags配合 collapse-tags 属性来
+      if (!val.includes('全选') && val.length === this.sendObjOptions.length) {
+        // 当前选中得值不包含“全选”，且其他项全选中
+        this.showTags = true
+        val.unshift('全选')
+        this.$refs.selectBox.$el.querySelector('.el-input__inner').style.height = '34px'
+      } else if (val.includes('全选') && val.length === 1) {
+        // 当前选中得值是“全选”时
+        this.showTags = true
+        this.sendObjOptions.map(item => {
+          val.push(item.value)
+        })
+      } else if (val.includes('全选') && val.length - 1 < this.sendObjOptions.length && endSelectVal === '全选') {
+        // 当前选中得值是其他项，未全部选完，而最后选中得是“全选”时
+        val = []
+        this.sendObjOptions.map(item => {
+          val.push(item.value)
+        })
+        val.unshift('全选')
+        this.showTags = true
+        this.$refs.selectBox.$el.querySelector('.el-input__inner').style.height = '34px'
+      } else if (val.includes('全选') && val.length - 1 < this.sendObjOptions.length) {
+        // 当前选中得值是其他项，未全部选完时
+        this.showTags = false
+        val = val.filter(item => {
+          return item !== '全选'
+        })
+      }
+      this.selectOptions = val // 赋值给select绑定得
+    },
+    pushObjChange(val) {
+      if (val) {
+        this.selectOptions = []
+        this.showTags = false
+      }
     }
-
   }
 }
 </script>
@@ -190,8 +231,9 @@ textarea{
   padding: 10px 12px;
   font-size: 14px;
 }
-.push{
+::v-deep .el-radio-group{
   width: 315px;
+  height: 32px;
   border: 1px solid #339CFF;
   border-radius: 3px;
   padding-left: 14px;
@@ -200,10 +242,10 @@ textarea{
     display: flex;
     align-items: center;
     margin-right: 50px;
-  span{
-    color: #3A99FD;
-    margin-left: 10px;
-  }
+    span{
+      color: #3A99FD;
+      margin-left: 10px;
+    }
   }
 }
 .el-checkbox{