vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作

最近需要将一个之前实现的tabs页面改造，实现每个tabs页再细化按照不同分类展示，第一反应是给每个tabs页中再增加tabs，思来想去总觉得导致页面很冗余不精简。最后决定使用slot插槽来实现这个需求。

因为业务代码较复杂先用饿了么UI官网的案例对比：

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane></el-tabs>
</template>

上面是最基本的tabs页，我的页面实现后是这样：

关键代码：

页面实现就不放了着重说实现效果与方式，改造后的效果是这样：

每个tabs在鼠标悬停的时候都会展示出更细致的分类，实现方式：

1.代码是在<el-tab-pane这个标签后面用slot具名插槽添加一个<el-dropdown下拉选

2.tab-pane的名称在下面插槽中命名，这里去掉就好

实现如下：

<el-tabs v-model="activeName" @tab-click="handleClick">//tabs的名称在下面插槽中命名，这里去掉就好<el-tab-pane name="index">//插入内容<span slot="label">//handleAllExamList方法为点击下拉选中内容后刷新页面执行的方法<el-dropdown placement="bottom" @command="handleAllExamList"><span>全部考试</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>//内容结束

下拉选这里我是写死的，也可以配置成灵活的，随需求来就行
<script>
const dropdownMenu = [{label: '水平类',command: '3'},{label: '资格类',command: '1'},{label: '招聘类',command: '2'}]
export default {data() {return {dropdownMenu,};},

点击选择时，这里触发handleAllExamList方法，方法中将页面原来的加载方法重写一遍，传入选择的类型参数，将页面重新赋值展示，这样就实现了这步看似简洁一些的操作：

算是记录一个小思路，欢迎讨论。

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作相关推荐

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
Element UI中el-calendar日历的年月快捷选择（可下拉选框选择）
需求: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当月,用户可以自由点选日期实现思路:右上角年月元素隐藏掉,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定 ...
Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）
项目场景: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当天日期,用户可以自由点选日期,被选中后日期以紫色显示,鼠标在日历上移动时,日期显示出橙色.有数据的日期显示出灰色. 实现思路:删 ...
【Element ui 的NavMenu二级菜单下拉icon修改】
Element ui 的NavMenu二级菜单下拉icon修改原来是这样的,下拉icon在右边修改成icon在左边,并更改icon的形状修改icon的css属性,覆盖原来的.需要注意的是取消打开 ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器实现的动态多级联动下拉选择基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择本文demo地址代码如 ...
谷歌的android下拉刷新页面,Android SwipeRefreshLayout：谷歌官方SDK包中的下拉刷新
<Android SwipeRefreshLayout:谷歌官方SDK包中的下拉刷新> 下拉刷新在如今移动开发中应用如此广泛和普遍,以至于谷歌干脆在SDK中给予支持.在android ...
在cube ui中使用better-scroll 自定义下拉刷新和上拉加载内容
在这次写项目中,偶然看到cube-ui组件库,看到这个ui组件库滚动盒子都是根据better-scroll封装的,在移动端上滑动效果体验比较不错,于是我决定使用cube-ui组件库,在使用过程中,在自 ...

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作相关推荐

最新文章

热门文章