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.pswp.cn/web/66922.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/66922.shtml
英文地址,請注明出處:http://en.pswp.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;與上傳文…