Mon Apr 29 10:02:00 CST 2024 inscode

src/components/SelectPanel/index.vue

 <template>
     <div>
-        <el-popover placement="bottom" width="400" trigger="click">
-            <el-select slot="reference" ref="selectBox" :value="allcheck" multiple collapse-tags placeholder="请选择"
-                @visible-change="$refs['selectBox'].blur()">
+        <el-popover placement="bottom-start" width="200" trigger="click">
+            <el-select slot="reference" ref="selectBox" :value="selectKey" multiple  collapse-tags
+                placeholder="请选择" @visible-change="$refs['selectBox'].blur()" @remove-tag="delTag">
                 <el-option label="1" value="a"></el-option>
+                <template #suffix>AAAA</template>
             </el-select>
             <div>
                 <el-row>
                     <el-col :span="12">
                         <el-checkbox-group v-model="checkValue.category1" class="flex-col"
-                            @change="checkChange($event, 'category1')">
+                            @change="checkChange()">
                             <el-checkbox v-for="item in listData.category1" :label="item" :key="item"></el-checkbox>
                         </el-checkbox-group>
                     </el-col>
                     <el-col :span="12">
                         <el-checkbox-group v-model="checkValue.category2" class="flex-col"
-                            @change="checkChange($event, 'category2')">
+                            @change="checkChange()">
                             <el-checkbox v-for="item in listData.category2" :label="item" :key="item"></el-checkbox>
                         </el-checkbox-group>
                     </el-col>
@@ -27,12 +28,12 @@
 <script>
 export default {
     name: 'SelectPanel',
-    props:{
-        value:Array
+    props: {
+        value: Array
     },
-    model:{
-        prop:'value',
-        event:'change'
+    model: {
+        prop: 'value',
+        event: 'change'
     },
     data() {
         return {
@@ -50,11 +51,15 @@ export default {
     computed: {
         allcheck: {
             get() {
-                return this.value.map(v => v.value)
+                return this.value;
             },
-            set(val){
-               this.$emit('change',val)
+            set(val) {
+                this.$emit('change', val)
             }
+        },
+
+        selectKey(){
+            return this.allcheck.map(v => v.value)
         }
 
     },
@@ -64,11 +69,18 @@ export default {
     },
 
     methods: {
-        checkChange(value, type) {
-            this.checkValue[type] = value;
-            console.log(this.checkValue)
-            this.allcheck =  (this.checkValue.category1.map(value => ({ label: 'category1', value }))).concat(this.checkValue.category2).map(value => ({ label: 'category2', value }))
-            console.log(this.allcheck, 'ALL')
+        //删除标签
+        delTag(tag){
+            this.allcheck = this.allcheck.filter(v =>{
+                if(v.value===tag){
+                    this.checkValue[v.type]=  this.checkValue[v.type].filter(val => val!==tag);
+                }
+                return v.value!==tag;
+            })
+        },
+        //监听勾选
+        checkChange() {
+            this.allcheck = (this.checkValue.category1.map(value => ({ type:'category1', value }))).concat((this.checkValue.category2).map(value => ({ type:'category2', value })))
         }
     },