当前位置: 首页 > news >正文

element tbas增加下拉框

使用Tabs 标签页的label插槽,嵌入Dropdown 下拉菜单,实现Tabs 标签页增加下拉切换功能

Tabs 标签页

 @tab-click="事件"(这个事件当中到拥有下拉框的tab里时,可以存一下Dropdown 第一个菜单的id,实现点击到拥有下拉框的tab时执行Dropdown 菜单值的查询)

Dropdown 下拉菜单

 @command="事件"(这个事件里点击时,直接将Tabs 绑定的v-model值设置为拥有下拉框的tab ID,实现点击Dropdown 菜单时,切换到指定的Tab页)

可以考虑不使用 Dropdown 菜单 手搓一个类似功能的dom,这样方便增加下拉时,下拉菜单是选中,目前我是把选中的下拉菜单名,放入的tab中进行展示,实现区分在哪个下拉菜单中

代码(vue2、vue3同一个思路)

//简易版<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-dropdown placement="bottom" @command="handleAllExamList"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></el-tab-pane></el-tabs>//循环版
<el-tabs v-model="activeOne" @tab-click="tabsClick"><el-tab-pane :name="tab.value" v-for="(tab, index) in tabList":key="index"><span slot="label" v-if="tab.name == '下拉菜单'"><el-dropdown placement="bottom" @command="handleAllExamList"><label class="zsk-css">{{ tab.name }}<span v-if="dropdownDX">({{ dropdownDX.name }})</span> <i class="el-icon-arrow-down el-icon--right"></i></label><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="menu in dropdownMenu" :key="menu.value":command="menu.value">{{ menu.name }}</el-dropdown-item></el-dropdown-menu></el-dropdown></span><span slot="label" v-else>{{ tab.name }}</span></el-tab-pane>
</el-tabs>

http://www.lryc.cn/news/526341.html

相关文章:

  • 新浪安卓(Android)开发面试题及参考答案(68道题,9道手撕题)
  • Zbrush导入笔刷
  • 实战演示:利用ChatGPT高效撰写论文
  • 大数据学习之SCALA分布式语言三
  • k8s简介,k8s环境搭建
  • 深入理解MySQL事务(万字详)
  • 微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动
  • Go Fx 框架使用指南:深入理解 Provide 和 Invoke 的区别
  • VSCode+Continue实现AI辅助编程
  • 阿里云服务器在Ubuntu上安装redis并使用
  • Blazor-Blazor呈现概念
  • 14-6-2C++的list
  • StarRocks常用命令
  • 激光雷达和相机早期融合
  • PMP–一、二、三模–分类–12.采购管理
  • C++ 标准模板库 (STL, Standard Template Library)
  • 从spec到iso的koji使用
  • 【记录自开发的SQL工具】工具字符拼接、Excel转sql、生成编码、生成测试数据
  • Cesium特效——城市白模的科技动效的各种效果
  • VS Code i18n国际化组件代码code显示中文配置 i18n ally
  • C++ —— 智能指针 unique_ptr (上)
  • 技术 · 创作 · 生活 | 我的 2024 全面复盘
  • 表的增删改查(MySQL)
  • 【设计模式】JAVA 策略 工厂 模式 彻底告别switch if 等
  • 基于Springboot用axiospost请求接收字符串参数为null的解决方案
  • 最长递增——蓝桥杯
  • 【MFC】C++所有控件随窗口大小全自动等比例缩放源码(控件内字体、列宽等未调整) 20250124
  • C#标准Mes接口框架(持续更新)
  • 【Uniapp-Vue3】动态设置页面导航条的样式
  • SQL 递归 ---- WITH RECURSIVE 的用法