Sun Apr 28 15:27:00 CST 2024 inscode

src/components/SelectPanel/index.vue

 <template>
     <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-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-col>
-       </el-row> 
+        <el-dropdown>
+            <el-select v-model="modelValue" multiple collapse-tags  placeholder="请选择"></el-select>
+            <div slot="dropdown">
+                <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-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-col>
+                </el-row>
+            </div>
+        </el-dropdown>
     </div>
 </template>
 <script>
-    export default{
-        name:'SelectPanel',
-        data(){
-            return {
-                listData:{
-                    category1:['1','2','3','4','5','6'],
-                    category2:['A','B','C','D','E','F','G']
-                }
+export default {
+    name: 'SelectPanel',
+    data() {
+        return {
+            modelValue: [],
+            listData: {
+                category1: ['1', '2', '3', '4', '5', '6'],
+                category2: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
             }
-        },
+        }
+    },
 
-        mounted(){
+    mounted() {
 
-        },
+    },
 
-        methods:{
+    methods: {
 
-        },
+    },
 
-    }
+}
 </script>
-<style lang="less" scoped>
-
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
\ No newline at end of file