Element UI 之 Tabs 栏下拉菜单的实现
产品小姐姐有一个业务需求,Tabs
组件某个 Tab
为 下拉菜单,效果如下:
业务代码比较多,这里弄了一个小 Demo,以供参考,效果如下:
一、思路
- 通过
el-tab-pane
的 name 值判断为是否指定下拉 tab 栏 - 然后利用组件提供的具名
slot
嵌入el-dropdown
组件 - 在
el-dropdown
中通过双向绑定,实现单选或多选(PS: 多选实现,需要设置菜单隐藏方式。涉及样式代码较多,本文没有弄这一步)
二、完整代码
<template><el-tabs v-model="activeName" type="card"><template v-for="tab in tabMenu"><el-tab-panev-if="tab.name !== 'software engineer'":key="tab.name":label="tab.label":name="tab.name">{{ tab.value }}</el-tab-pane><el-tab-pane v-else :key="tab.name"><span slot="label"><el-dropdown placement="bottom" @command="handleCommand"><span>{{ tab.label }}</span><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="menu in dropdownMenu":key="menu.name":command="menu.command">{{ menu.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown></span>{{ selected === '' ? '无' : dropdownValueMap[selected] }}</el-tab-pane></template></el-tabs>
</template><script>
const tabMenu = [{label: '快递员',name: 'courier',value: '王卫'},{label: '送餐员',name: 'delivery man',value: '王兴'},{label: '软件工程师',name: 'software engineer'}
]const dropdownMenu = [{label: '前端工程师',command: 'front-end engineer',value: '尤小右'},{label: '后端工程师',command: 'back-end engineer',value: '马士兵'},{label: '全沾工程师',command: 'full stack engineer',value: '李哈哈'}
]const dropdownValueMap = {'front-end engineer': '尤小右','back-end engineer': '马士兵','full stack engineer': '李哈哈'
}export default {name: 'Home',data () {return {tabMenu,dropdownMenu,dropdownValueMap,activeName: 'courier',selected: ''}},methods: {handleCommand (dropdownItem) {this.selected = dropdownItem}}
}
</script>
Element UI 之 Tabs 栏下拉菜单的实现相关推荐
- element ui table 中加下拉菜单
<el-table-column prop="roleList" label=角色 :width="180"> <templat ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
- HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作?这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧 我们要说的是html导航栏下拉菜单的制作,先看 ...
- html 下拉导航栏源码,html导航栏下拉菜单怎么制作?这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
- 导航栏 下拉菜单的制作
导航栏 , 下拉菜单的制作 代码示范 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- 导航栏下拉菜单效果代码
导航栏,菜单栏下拉简单实现 先看看效果图 <!-- jQuery Drop-down Menu/Navigation bar Copyright 2017-9-21, Jachin QQ: 38 ...
- Layui导航栏下拉菜单不显示问题
1.首先检查自己有没有导入layui.js 2.检查是否已经加载element模块 <ul> ....... </ul> //放到你导航栏代码块的后面 <script&g ...
- html纯css实现导航栏下拉菜单(带下拉三级菜单)
本文转载于:https://blog.csdn.net/qq_30449567/article/details/80548720 <!DOCTYPE html> <html lang ...
- Bootstrap导航栏下拉菜单鼠标滑过展开
boostrap的导航栏不提供鼠标滑过展开,通过给类为dropdown的li标签添加和移除open类实现 $(function () {$(".dropdown").mouseov ...
- dw添加下拉菜单_怎样用dw制作导航栏下拉菜单
一.工具:dw工具 二.操作步骤: [1]打开dw软件,新建立一个新的文件. [2]点击常用,选择布局,绘制一个层. [3]再点击层,再绘制一个.可以看到,第一个层是layer1,第二个是layer2 ...
最新文章
- python pip换源方法
- 禁止 VMware Fusion 自动调整 Windows 分辨率
- malloc/free与new/delete的区别与联系
- python做马尔科夫模型预测法_Python实现HMM(隐马尔可夫模型)
- PAT乙级 1031 查验身份证 (15 分)
- 我是如何自学编程以及如何两个月达到一万粉丝的,辣条的心路历程希望能帮助到你
- 一个项目部署多个节点会导致锁失效么_一文看透 Redis 分布式锁进化史(解读 + 缺陷分析)...
- java对象结构 对象头 Markword
- mysql悲观锁隔离级别_mysql隔离级别与悲观锁、乐观锁
- 匹配数据库 帆软 查询条件_帆软报表学习笔记①——根据参数查询
- 计算机网盘打不开,电脑百度网盘无法打开视频的解决方法|电脑百度网盘无法打开视频如何解决...
- Bootstrap实战---footer处理
- 【重磅】2021年SCI影响因子滚烫式公布!各领域TOP期刊!(附下载链接)
- FreeRTOS中多种信号量
- invoke调用成员方法(无参和有参):
- Quartus II各版本支持的器件
- 地图采集车的那些事 | 惯性导航
- mysql中signed是什么类型_mysql|unsigned 与 signed 类型
- 关于校招那些事(一)—— 简历
- Spark 中 RDD 的详细介绍
热门文章
- Excel基础篇(四):查找重复身份证号码
- excel身份证号提取出生日期
- 北京地铁计价模型分析及计价系统设计
- 对账、结账、错账更正方法、划线更正法、红字更正法、补充登记法
- 超五类屏蔽双绞线和计算机电缆区别,什么是超五类网线?双绞线(网线)常用种类的区别详解...
- 圣经中真的藏有密码吗? 摘自台湾权威杂志《科学月刊》
- k_fold_cv函数——bartMachine包内函数详解
- 计算机粘贴复制知识,不能复制粘贴怎么办?Win7电脑不能复制粘贴是什么原因及解决方法...
- 网络故障排查简单思路(思路见目录)
- 个人博客系统中的评论功能设计