Sun Apr 28 16:44:00 CST 2024 inscode

src/components/SelectPanel/index.vue

 <template>
     <div>
-        <el-dropdown>
-            <el-select v-model="modelValue" multiple collapse-tags  placeholder="请选择"></el-select>
-            <div slot="dropdown">
+        <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-option label="1" value="a"></el-option>
+            </el-select>
+            <div>
                 <el-row>
                     <el-col :span="12">
-                        <el-check-group>
-                            <el-checkbox v-for="item in listData.category1" :key="item">{{ item }}</el-checkbox>
-                        </el-check-group>
+                        <el-checkbox-group v-model="checkValue.category1" class="flex-col"
+                            @change="checkChange($event, 'category1')">
+                            <el-checkbox v-for="item in listData.category1" :label="item" :key="item"></el-checkbox>
+                        </el-checkbox-group>
                     </el-col>
                     <el-col :span="12">
-                        <el-check-group>
-                            <el-checkbox v-for="item in listData.category2" :key="item">{{ item }}</el-checkbox>
-                        </el-check-group>
+                        <el-checkbox-group v-model="checkValue.category2" class="flex-col"
+                            @change="checkChange($event, 'category2')">
+                            <el-checkbox v-for="item in listData.category2" :label="item" :key="item"></el-checkbox>
+                        </el-checkbox-group>
                     </el-col>
                 </el-row>
             </div>
-        </el-dropdown>
+        </el-popover>
     </div>
 </template>
 <script>
 export default {
     name: 'SelectPanel',
+    props:{
+        value:Array
+    },
+    model:{
+        prop:'value',
+        event:'change'
+    },
     data() {
         return {
-            modelValue: [],
+            checkValue: {
+                category1: [],
+                category2: []
+            },
             listData: {
                 category1: ['1', '2', '3', '4', '5', '6'],
                 category2: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
@@ -32,14 +47,38 @@ export default {
         }
     },
 
+    computed: {
+        allcheck: {
+            get() {
+                return this.value.map(v => v.value)
+            },
+            set(val){
+               this.$emit('change',val)
+            }
+        }
+
+    },
+
     mounted() {
 
     },
 
     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')
+        }
     },
 
 }
 </script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.flex-col {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: baseline;
+}
+</style>
\ No newline at end of file