Sun Apr 28 15:02: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> 
+    </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']
+                }
+            }
+        },
+
+        mounted(){
+
+        },
+
+        methods:{
+
+        },
+
+    }
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/router/routes.js

@@ -11,6 +11,15 @@ export default [
         path:'/element-ui',
         meta:{title:'element-ui',icon:'el-icon-platform-eleme'},
         component:DynamicRoute,
+        redirect:'/element-ui/selectPanel',
+        children:[
+            {
+                path:'selectPanel',
+                name:'SelectPanel',
+                meta:{title:'选择框'},
+                component:() => import('@/views/Element/SelectPanelDemo.vue')
+            }
+        ]
     },
     {
         path:'/antdv',

src/views/Element/SelectPanelDemo.vue

+<template>
+    <div>
+        <h3>自定义选择框</h3>
+        <SelectPanel v-model="modelValue"/>
+    </div>
+</template>
+<script>
+    import SelectPanel from '@/components/SelectPanel/index.vue'
+    export default{
+        name:'SelectPanelDemo',
+        components:{SelectPanel},
+        data(){
+            return {
+                modelValue:[]
+            }
+        },
+
+        mounted(){
+
+        },
+
+        methods:{
+
+        },
+
+    }
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file