vant自定义二级菜单

（1）组件解释：

本组件是为了解决二级联动的效果编写的，这里使用了省份和城市分开的效果，具体展示效果，可以参考下面。

（2）组件代码：

<template><div><button @click="showM">{{ value || "选择省份" }}</button><button @click="showC">{{ value2 || "选择城市" }}</button><!-- 省份 --><van-popup v-model="showPicker" position="bottom"><van-pickershow-toolbar:columns="columns"@confirm="onConfirm"@cancel="showPicker = false"/></van-popup><!-- 城市 --><van-popup v-model="showPicker2" position="bottom"><van-pickershow-toolbar:columns="columns2"@confirm="onConfirm2"@cancel="showPicker2 = false"/></van-popup></div>
</template><script>
export default {mounted() {},data() {return {value: "",value2: "",columns: ["杭州", "北京", "海南省"],city: [{name: "杭州",value: ["广州", "佛山"]},{name: "北京",value: ["海淀", "廊坊"]},{name: "海南省",value: ["三亚", "海口"]}],showPicker: false,showPicker2: false,columns2: []};},methods: {onConfirm(value) {this.value = value;this.value2 = "";this.showPicker = false;},onConfirm2(value) {this.value2 = value;this.showPicker2 = false;},showM() {this.showPicker = true;},showC() {if (this.value) {let self = this;self.showPicker2 = true;self.city.forEach(v => {if (v.name == self.value) {self.value2 = self.name;self.columns2 = v.value;}});} else {}}},components: {}
};
</script>
<style lang="scss" scoped></style>

（3）展示效果：

还可以结合筛选功能使用：

vant自定义二级菜单相关推荐

vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
为SharePoint网站创建自定义导航菜单
相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoint 2007/2010的网站导航基本上基于标准的ASP.NET SiteMap模型,所以只要 ...
SE43自定义sap菜单
在系统运行初期,自定义开发事物码可能还不多.如果经过长时间的积累,过多的事物码会很难记忆.因此,考虑把事物码按照功能进行分类,部署在系统前台中. 具体步骤: 1. 当期SAP 系统默认菜单: ERP默 ...
java 微信菜单_java微信开发API第四步微信自定义个性化菜单实现
微信如何实现自定义个性化菜单,下面为大家介绍一.全局说明详细说明请参考前两篇文章. 二.本文说明本文分为五部分: * 工具类AccessTokenUtils的封装 * 自定义菜单和个性化菜单文档 ...
android 多级分组,android 二级菜单（类似QQ分组）
注意点:1)适配器BaseExpandableListAdapter 2)数据源(数组.集合都行)(重点) /** * Created by mb on 2014/11/18. * 二级菜单适配器 * ...
【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一.这是什么样的一个插件我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,例 ...
Chrome开发自定义右键菜单实现快速跳转到指定页面
一.背景假设我们在日常的测试过程中,有很多页面需要经常访问,一种方式是我们可以直接把这些页面添加为书签,但这种方式必须记录完整的URL.如果我们有多套环境,比如有测试环境.UAT环境.线上环境,每套 ...
菜单栏点击显示二级菜单_显示完整菜单
菜单栏点击显示二级菜单 On my own computer, I like to see the full menus in Excel, so I selected that setting: 在 ...
android 横向多级列表,Android实现横向二级菜单
本文实例为大家分享了Android二级横向菜单的实现过程.效果如上图: 这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下这个效果,首先说一下逻辑 ...

vant自定义二级菜单

vant自定义二级菜单相关推荐

最新文章

热门文章