使用vue建省级联动菜单很简单

最新推荐文章于 2023-12-22 20:07:19 发布

原创最新推荐文章于 2023-12-22 20:07:19 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#使用vue[写联动省级菜单超级简单]

学习同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了如何使用Element UI中的级联选择器组件，包括数据结构的定义、v-model绑定以及@change事件的使用。通过实例展示了如何构建一个包含多个省份及其下属城市的级联选择器，并解决了selectedOptions未定义的常见错误。

  <el-cascader
              :options="options"
              v-model="selectedOptions"
              @change="handleChange">
      </el-cascader>
      这是用el写的标签  因为放n个不确定的省级数据  所以建议用数组存放数据 
      标签写完了 可以写script 
      如下：
      options:[
                {
                    label:'湖北',
                    value:'湖北',
                    children:[
                        {label:'十堰',value:'十堰'},
                        {label:'武汉',value:'武汉'},
                        {label:'黄冈',value:'黄冈'}
                    ]
                },{
                label:'广东',
                    value:'广东',
                    children:[
                        {label:'南海',value:'南海'},{label:'广东',value:'广东'},{label:'深圳',value:'深圳'}
                    ]
                },
                {
                    label:'湖南',
                    value:'湖南',
                   children:[
                       {label:'长沙',value:'长沙'},
                       {label:'湘潭',value:'湘潭'},
                       {label:'岳阳',value:'岳阳'}
                   ]
                },{
                    label:'四川',
                    value:'四川',
                    children:[
                        {label:'成都',value:'成都'},
                        {label:'绵阳',value:'绵阳'},
                        {label:'德阳',value:'德阳'}
                        ]
                },{
                    label:'河南',
                    value:'河南',
                    children:[
                        {label:'郑州',value:'郑州'},
                        {label:'洛阳',value:'洛阳'},
                        {label:'开封',value:'开封'}]
                },{
                    label:'江西',
                    value:'江西',
                    children:[
                        {label:'南昌',value:'南昌'},
                        {label:'九江',value:'九江'},
                        {label:'吉安',value:'吉安'}]
                },{
                label:'特别行政区',
                    value:'特别行政区',
                    children:[
                        {label:'香港',value:'香港'},
                        {label:'澳门',value:'澳门'}
                    ]
                }
                ],
                如果你看懂了 ，就会发现特别简单  主要是格式  lable 和value 而children 指的就是 在省级下的城市 但是 这样运行的话  控制台就会报错 说selectedOptions  unfidend  所以  你应该在option前加一个 selectoptions =[]  这样就可以了  你们可以试试哦 要是还有问题的话 记得留言 有缘解释