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.mzph.cn/web/66922.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL-leetcode—1179. 重新格式化部门表

1179. 重新格式化部门表 表 Department&#xff1a; ---------------------- | Column Name | Type | ---------------------- | id | int | | revenue | int | | month | varchar | ---------------------- 在 SQL 中&#xff0c;(id, month) 是表的联合主键。 这个表格有关…

【Address Overfitting】解决过拟合的三种方法

目录 1. 收集更多数据实践方法&#xff1a;适用场景&#xff1a;优缺点&#xff1a; 2. 特征选择方法介绍&#xff1a;实践示例&#xff1a;适用场景&#xff1a;优缺点&#xff1a; 3. 正则化&#xff08;Regularization&#xff09;正则化类型&#xff1a;实践示例&#xff1…

面向通感一体化的非均匀感知信号设计

文章目录 1 非均匀信号设计的背景分析1.1 基于OFDM波形的感知信号1.2 非均匀信号设计的必要性和可行性1.2 非均匀信号设计的必要性和可行性 3 通感一体化系统中的非均匀信号设计方法3.1 非均匀信号的设计流程&#xff08;1&#xff09;均匀感知信号设计&#xff08;2&#xff0…

【深度学习】搭建PyTorch神经网络进行气温预测

第一步 数据加载与观察 ①导包 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline ②加载数据 features pd.read_csv(…

ESP8266 NodeMCU与WS2812灯带:实现多种花样变换

在现代电子创意项目中&#xff0c;LED灯带的应用已经变得极为广泛。通过结合ESP8266 NodeMCU的强大处理能力和FastLED库的高效功能&#xff0c;我们可以轻松实现多达100种灯带变换效果。本文将详细介绍如何使用Arduino IDE编程&#xff0c;实现从基础到高级的灯光效果&#xff…

pycharm踩坑(1)

由于我重装系统&#xff0c;导致我的pycharm需要进行重装&#xff0c;因此我觉得需要记录一下&#xff0c;pycharm的正确使用方法 汉化 汉化很重要&#xff0c;除非你从小就双语教学&#xff0c;不然你看着那些英文就是会消耗大量的精力 我使用的pycharm版本是pycharm-commun…

#HarmonyOS篇:build-profile.json5里面配置productsoh-package.json5里面dependencies依赖引入

oh-package.json5 用于描述包名、版本、入口文件和依赖项等信息。 {"license": "","devDependencies": {},"author": "","name": "entry","description": "Please describe the basic…

OpenCV2D 特征框架 (11)特征检测与描述用于检测二值图像中连通区域(即“斑点”或“blob”)的类cv::SimpleBlobDetector的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::SimpleBlobDetector 是 OpenCV 中用于检测二值图像中连通区域&#xff08;即“斑点”或“blob”&#xff09;的类。这些连通区域可以是白色前…

关于deepin上运行Qt开发的程序

国产化替代是将来各单位的主流趋势&#xff0c;探索自行开发应用程序在国产操作系统上正常运行是将来的主要工作之一。本文浅尝gui程序在统信社区版——deepin上遇到的小问题。 使用Qt在deepin上做了一个类似gif的帧动画弹窗&#xff0c;在编译运行时&#xff0c;程序可以正常…

Unity自学之旅05

Unity自学之旅05 Unity学习之旅⑤&#x1f4dd; AI基础与敌人行为&#x1f94a; AI导航理论知识&#xff08;基础&#xff09;开始实践 &#x1f383; 敌人游戏机制追踪玩家攻击玩家子弹碰撞完善游戏失败条件 &#x1f917; 总结归纳 Unity学习之旅⑤ &#x1f4dd; AI基础与敌…

我想通过python语言,学习数据结构和算法该如何入手?

学习数据结构和算法是编程中的重要基础&#xff0c;Python 是一个非常适合入门的语言。以下是学习数据结构和算法的步骤和建议&#xff1a; 1. 掌握 Python 基础 确保你对 Python 的基本语法、数据类型、控制结构&#xff08;如循环、条件语句&#xff09;、函数等有扎实的理…

浅谈Unity中Canvas的三种渲染模式

Overview UGUI通过 Canvas 组件渲染和管理UI元素。Canvas 是 UI 元素的容器&#xff0c;它决定了 UI 元素的渲染方式以及它们在屏幕上的显示效果。Canvas 有三种主要的渲染模式&#xff0c;每种模式有不同的用途和特点。本文将介绍这三种渲染模式 1. Screen Space - Overlay 模…

Unity中在UI上画线

在UI中画一条曲线 我封装了一个组件,可以实现基本的画线需求. 效果 按住鼠标左键随手一画. 用起来也很简单,将组件挂到空物体上就行了,红色的背景是Panel. 你可以将该组件理解为一个Image,只不过形状更灵活一些罢了,所以它要放在下面的层级(不然可能会被挡住). 代码 可以…

2024.1.22 安全周报

政策/标准/指南最新动态 01 工信部印发《关于加强互联网数据中心客户数据安全保护的通知》 原文: https://www.secrss.com/articles/74673 互联网数据中心作为新一代信息基础设施&#xff0c;承载着千行百业的海量客户数据&#xff0c;是关系国民经济命脉的重要战略资源。…

探索 LLM:从基础原理到 RAG 实现的深度解析

一.LLM基础知识 1.1 大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09; 他是模型&#xff0c;是 AI 能力的核心。他是语言模型&#xff0c;其核心能力在于语言能力。他是大语言模型&#xff0c;与传统模型相比&#xff0c;它最大的特点就是“大”。 1…

Mac cursor设置jdk、Maven版本

基本配置 – Cursor 使用文档 首先是系统用户级别的设置参数&#xff0c;运行cursor&#xff0c;按下ctrlshiftp&#xff0c;输入Open User Settings(JSON)&#xff0c;在弹出的下拉菜单中选中下面这样的&#xff1a; 在打开的json编辑器中追加下面的内容&#xff1a; {"…

ARM64平台Flutter环境搭建

ARM64平台Flutter环境搭建 Flutter简介问题背景搭建步骤1. 安装ARM64 Android Studio2. 安装Oracle的JDK3. 安装 Dart和 Flutter 开发插件4. 安装 Android SDK5. 安装 Flutter SDK6. 同意 Android 条款7. 运行 Flutter 示例项目8. 修正 aapt2 报错9. 修正 CMake 报错10. 修正 N…

selenium clear()方法清除文本框内容

在使用Selenium进行Web自动化测试时&#xff0c;清除文本框内容是一个常见的需求。这可以通过多种方式实现&#xff0c;取决于你使用的是哪种编程语言&#xff08;如Python、Java等&#xff09;以及你的具体需求。以下是一些常见的方法&#xff1a; 1. 使用clear()方法 clear…

基于海思soc的智能产品开发(视频的后续开发)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们讨论了camera&#xff0c;也讨论了屏幕驱动&#xff0c;这些都是基础的部分。关键是&#xff0c;我们拿到了这些视频数据之后&#xff0c;…

vue3+webOffice合集

1、webOffice 初始化 1&#xff09;officeType: 文档位置&#xff1a;https://solution.wps.cn/docs/web/quick-start.html#officetype 2&#xff09;appId: 前端使用appId 后端需要用到AppSecret 3&#xff09;fileId: 由后端返回&#xff0c;前端无法生成&#xff0c;与上传文…