Vue3 + Element Plus表格篩選樣式設置

如果彈出框掛載在?body?下（而非組件內部），scoped 樣式無法生效，這時就需要使用全局樣式。
強制全局樣式

1、添加全局樣式文件（或在原有的文件中添加以下內容）?src/assets/global.scss

/* 全局強制樣式覆蓋 *//* 表格篩選器樣式 */
/* 表格篩選器樣式，篩選內容區域 */
.el-popper.is-light.el-table-filter .el-table-filter__content {min-width: 100px;
}
/* 表格篩選器樣式，底部操作區域 */
.el-popper.is-light.el-table-filter .el-table-filter__bottom {display: flex !important;justify-content: space-between !important;align-items: center !important;padding: 8px 12px !important;
}
/* 表格篩選器樣式，底部操作區域，按鈕元素 */
.el-popper.is-light.el-table-filter .el-table-filter__bottom button {font-size: 14px;
}
/* 表格篩選器樣式，底部操作區域，按鈕元素，開頭的按鈕，篩選 */
.el-popper.is-light.el-table-filter .el-table-filter__bottom button:first-child {color: black;
}
/* 表格篩選器樣式，底部操作區域，按鈕元素，最后的按鈕，重置 */
.el-popper.is-light.el-table-filter .el-table-filter__bottom button:last-child {color: black;
}

也可以使用scss嵌套寫法

/* 全局強制樣式覆蓋 *//* 表格篩選彈窗 */
/* 表格篩選彈窗容器 */
// .el-popper.is-light.el-table-filter {
// .el-popper[class*="el-table-filter"] 是一個穩健的選擇器寫法，專為 Element Plus 動態類名場景設計，能有效解決因類名順序或動態類導致的樣式覆蓋失效問題
.el-popper[class*="el-table-filter"] {/* 篩選內容區域 */.el-table-filter__content {min-width: 100px;max-height: 450px;}/* 滾動條容器 */.el-scrollbar {height: 100% !important; /* 繼承內容容器高度 *//* 滾動可視區域 */.el-scrollbar__wrap {max-height: 100% !important;overflow: auto !important;}/* 內容視圖 */.el-scrollbar__view {min-height: 100% !important; /* 防止內容不足時高度塌陷 */padding: 8px; /* 內容內邊距 */}}/* 底部操作區域 */.el-table-filter__bottom {display: flex !important;justify-content: space-between !important;align-items: center !important;padding: 8px 12px !important;/* 按鈕元素 */button {font-size: 14px;}/* 開頭的按鈕，篩選 */button:first-child {margin-left: 0;}/* 最后的按鈕，重置 */button:last-child {margin-right: 0;}}
}

2、在 main.ts 中，導入全局樣式文件?global.scss

......
// 引入全局樣式
import "@/assets/global.scss";

樣式效果：

?

獲取使用全局樣式的調試方法 ：

  1. 在瀏覽器中?手動添加樣式?測試：

    • 打開開發者工具 (F12)

    • 找到底部按鈕元素?<div class="el-table-filter__bottom">

    • 在?Styles?面板右側點擊?+，手動輸入以下代碼：

    .el-table-filter__bottom {background: red;
}

如果手動添加的樣式生效，說明需要?全局樣式

全局樣式設置講解說明

一、選擇器拆解

css

復制

下載

.el-popper.is-light.el-table-filter .el-table-filter__bottom

可以分解為三個層級：

  1. .el-popper

    • 表示這是一個彈出層容器（popper.js 生成的浮層容器）

  2. .is-light

    • 表示這是一個「淺色主題」的彈出層（Element UI 的視覺主題修飾符）

  3. .el-table-filter

    • 表示這是一個「表格列篩選器」的特定組件

  4. .el-table-filter__bottom

    • 表示篩選器底部的操作區域（子元素）

二、層級關系解析

1. 父容器結構

html

復制

下載

運行

<!-- 組合類名的父容器 -->
<div class="el-popper is-light el-table-filter"><!-- 內部包含的子元素 --><div class="el-table-filter__bottom"></div>
</div>

  • .el-popper.is-light.el-table-filter
    表示同時擁有這三個類名的元素（多個類名直接連接，中間沒有空格）

  • .el-table-filter__bottom
    是該容器的后代元素（中間的空格表示后代選擇器）

2. 實際匹配的 DOM 結構

假設 Element UI 生成的 HTML 結構如下：

html

復制

下載

運行

<!-- 表格列篩選器浮層 -->
<div class="el-popper is-light el-table-filter" style="position: absolute; top: 100px; left: 200px;"><!-- 篩選內容區域 --><div class="el-table-filter__content">...</div><!-- 底部操作區域 --><div class="el-table-filter__bottom"><button>重置</button><button>確定</button></div>
</div>

  • 選擇器會精準匹配到?最后一個?<div class="el-table-filter__bottom">?元素

三、選擇器特點

1.?復合類名選擇

el-popper.is-light.el-table-filter?表示同時滿足：

  • 是彈出層容器（.el-popper）

  • 使用淺色主題（.is-light）

  • 屬于表格列篩選器（.el-table-filter）

2.?后代選擇器

最后的空格表示?.el-table-filter__bottom?是前面復合容器的子元素

3.?高特異性（Specificity）

這種寫法比單一類名選擇器（如?.el-table-filter__bottom）具有更高的優先級，可以覆蓋默認樣式

四、實際作用總結

這個選擇器的本質是：
「針對 Element UI 中所有使用淺色主題的表格列篩選彈出框，精準定位到它的底部操作區域」。

相當于在代碼層面完成了以下篩選邏輯：

js

復制

下載

if (元素是彈出層容器 && 是淺色主題 && 是表格篩選器) {找到它的底部操作區域元素
}

五、為什么需要這樣寫？

  1. 精準定位：避免樣式污染其他彈出層（如日期選擇器、下拉菜單等）

  2. 主題適配：僅針對淺色主題的篩選器（深色主題不受影響）

  3. 覆蓋默認樣式：通過高特異性選擇器覆蓋組件庫默認樣式

這種選擇器寫法是 Element UI 等組件庫開發中常見的 BEM + 狀態修飾符 的組合用法。

.el-popper.is-light.el-table-filter

與

.el-popper[class*="el-table-filter"]

.el-popper[class*="el-table-filter"]?是一個?復合 CSS 選擇器，它的含義可以通過拆解來理解：

語法解析

組成部分含義
.el-popper匹配所有?class?屬性中包含?el-popper?類的元素
[class*="el-table-filter"]匹配?class?屬性值中?包含子字符串?el-table-filter?的元素
組合后的選擇器匹配同時滿足以下條件的元素：
1. 包含?el-popper?類
2.?class?屬性中包含?el-table-filter

為什么這樣寫？

Element Plus 的篩選彈窗 DOM 結構通常是這樣的：

html

復制

下載

運行

<div class="el-popper is-pure is-light el-table-filter" ...><!-- 彈窗內容 -->
</div>

這里：

  • el-popper?是 Element 彈窗組件的基類

  • el-table-filter?是表格篩選功能特有的標識類

但實際渲染時，Element 可能會動態添加其他修飾類（如?is-light,?is-pure），導致類名順序或數量不確定。使用?[class*="el-table-filter"]?可以：

  1. 避免依賴類名順序

  2. 兼容未來可能的類名變化

  3. 覆蓋嵌套在其他組件中的彈窗

與直接寫?.el-table-filter?的區別

寫法問題場景
.el-table-filter如果彈窗的類名是?el-popper el-table-filter，直接選擇器有效
.el-popper.el-table-filter如果類名順序變化（如?el-table-filter el-popper），選擇器會失效
.el-popper[class*="el-table-filter"]無論類名順序如何，只要包含?el-table-filter?子字符串就生效

實際應用場景

假設 Element 在不同版本中渲染出以下結構：

html

復制

下載

運行

<!-- 舊版本 -->
<div class="el-popper el-table-filter is-light"><!-- 新版本 -->
<div class="el-table-filter el-popper is-pure"><!-- 動態場景 -->
<div class="el-popper some-dynamic-class el-table-filter">

使用?[class*="el-table-filter"]?可以?通配所有可能性，保證選擇器始終生效。

性能與風險

優點注意事項
更強的兼容性過度使用?*=?可能誤匹配其他包含?el-table-filter?子字符串的類名
避免類名順序依賴確保目標元素的?class?中確實包含?el-table-filter
簡化版本升級適配建議配合開發者工具驗證實際 DOM 結構

驗證方法

在瀏覽器開發者工具中：

  1. 打開 Elements 面板

  2. 找到篩選彈窗的 DOM 元素

  3. 檢查其?class?屬性是否包含?el-table-filter：

    驗證示例

總結

.el-popper[class*="el-table-filter"]?是一個?穩健的選擇器寫法，專為 Element Plus 動態類名場景設計，能有效解決因類名順序或動態類導致的樣式覆蓋失效問題。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/82151.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/82151.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/82151.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

vue--ofd/pdf預覽實現

vue--ofd/pdf預覽實現

背景 實現預覽ofd/pdf超鏈接功能 業務實現 pdf的預覽 實現方式&#xff1a; 直接使用 <iframe :src"${url}#navpanes0&toolbar0" /> 實現pdf的預覽。 navpanes0 隱藏側邊欄toolbar0 隱藏頂部工具欄 使用pdf.js&#xff0c;代碼先行&#xff1a; <tem…
閱讀更多...
【C++20新特性】ranges::sort()使用方法，優勢，注意點

【C++20新特性】ranges::sort()使用方法，優勢，注意點

以下是關于 ranges::sort() 的詳細說明&#xff1a; 1. ranges::sort() 的使用方法 ranges::sort() 是 C20 引入的基于范圍&#xff08;Ranges&#xff09;的排序函數&#xff0c;其語法更簡潔&#xff0c;支持直接操作容器或范圍對象。 (1)基本用法 #include <vector&g…
閱讀更多...
深入理解設計模式之適配器模式

深入理解設計模式之適配器模式

深入理解設計模式之適配器模式 1. 適配器模式概述 適配器模式(Adapter Pattern)是一種結構型設計模式&#xff0c;它允許將一個類的接口轉換為客戶端所期望的另一個接口。適配器模式使得原本由于接口不兼容而不能一起工作的類能夠協同工作&#xff0c;扮演了"轉換器&quo…
閱讀更多...
【數據結構 · 初階】- 快速排序

【數據結構 · 初階】- 快速排序

目錄 一. Hoare 版本 1. 單趟 2. 整體 3. 時間復雜度 4. 優化&#xff08;搶救一下&#xff09; 4.1 隨機選 key 4.2 三數取中 二. 挖坑法 格式優化 三. 前后指針&#xff08;最好&#xff09; 四. 小區間優化 五. 改非遞歸 快速排序是 Hoare 提出的一種基于二叉樹…
閱讀更多...
第2周 PINN核心技術揭秘: 如何用神經網絡求解偏微分方程

第2周 PINN核心技術揭秘: 如何用神經網絡求解偏微分方程

1. PDEs與傳統數值方法回顧 (Review of PDEs & Traditional Numerical Methods) 1.1 什么是偏微分方程 (Partial Differential Equations, PDEs)? 偏微分方程是描述自然界和工程領域中各種物理現象（如熱量傳播、流體流動、波的振動、電磁場分布等）的基本數學語言。 1.…
閱讀更多...
Neo4j（二） - 使用Cypher操作Neo4j

Neo4j（二） - 使用Cypher操作Neo4j

文章目錄 前言一、Cypher簡介二、數據庫操作1. 創建數據庫2. 查看數據庫3. 刪除數據庫4. 切換數據庫 三、節點、關系及屬性操作1. 創建節點與關系1.1 語法1.2 示例 2. 查詢數據2.1 語法2.2 示例 3. 更新數據3.1 語法3.2 示例 4. 刪除節點與關系4.1 語法4.2 示例 5. 合并數據5.1…
閱讀更多...
RabbitMQ的Web管理頁面給我看懵了，這都什么意思啊

RabbitMQ的Web管理頁面給我看懵了，這都什么意思啊

文章目錄 OverviewTotalsMessage RatesQueued Messages NodesChurn StatisticsPorts and ContextsExport DefinitionsImport Definitions ConnectionsChannelsExchangesQueuesAdmin他們之間的關聯 在上一篇文章中我們講到了如何在Windows中安裝Rabbitmq&#xff0c; 小白也能搞…
閱讀更多...
安全基礎與協議分析

安全基礎與協議分析

5.1 Web安全基礎 5.1.1 Web安全基礎概覽&#xff08;一、二&#xff09; Web安全的核心目標是保護Web應用及其數據免受攻擊&#xff0c;涵蓋以下關鍵領域&#xff1a; 攻擊面&#xff1a; 前端漏洞&#xff08;XSS、CSRF&#xff09;。 后端漏洞&#xff08;SQL注入、RCE&a…
閱讀更多...
STM32項目實戰：ADC采集

STM32項目實戰：ADC采集

STM32F103C8T6的ADC配置。PB0對應的是ADC1的通道8。在標準庫中&#xff0c;需要初始化ADC&#xff0c;設置通道&#xff0c;時鐘&#xff0c;轉換模式等。需要配置GPIOB的第0腳為模擬輸入模式&#xff0c;然后配置ADC1的通道8&#xff0c;設置轉換周期和觸發方式。 接下來是I2C…
閱讀更多...
第十四章：數據治理之數據源：數據源的數據接入、業務屬性梳理及監控

第十四章：數據治理之數據源：數據源的數據接入、業務屬性梳理及監控

本章開始&#xff0c;將進入9大模塊的介紹。第一個模塊我們先介紹&#xff1a;數據源。數據源是整個數據中臺數據的來源&#xff0c;是一個起點。更好的管理好數據源這個起點&#xff0c;是數據治理的一個好的開始。 在【數據&#xff1a;業務生數據&#xff0c;數據生“萬物”…
閱讀更多...
【C/C++】多線程開發：wait、sleep、yield全解析

【C/C++】多線程開發：wait、sleep、yield全解析

文章目錄 多線程開發&#xff1a;wait、sleep、yield全解析1 What簡要介紹詳細介紹wait() — 條件等待&#xff08;用于線程同步&#xff09;sleep() — 睡覺&#xff0c;定時掛起yield() — 自愿讓出 CPU 2 區別以及建議區別應用場景建議 3 三者協作使用示例 多線程開發&#…
閱讀更多...
阿里云CDN刷新預熱--刷新URL

阿里云CDN刷新預熱--刷新URL

文章目錄 一、全英文URL刷新預熱二、摻雜中文的URL刷新預熱2.1 對帶中文URL進行編碼2.2 預熱刷新 三、CDN刷新-核心作用與價值3.1 核心作用3.2 核心價值3.3 典型使用場景 *最后我想說&#xff1a;請你不要相信我說的每一句話&#xff0c;這只是我的個人經驗* 一、全英文URL刷新…
閱讀更多...
Oracle 19c DG備庫報錯ORA-00313、ORA-00312、ORA-27037

Oracle 19c DG備庫報錯ORA-00313、ORA-00312、ORA-27037

Oracle 19c DG備庫報錯ORA-00313、ORA-00312、ORA-27037 錯誤排查問題處理錯誤排查 DG同步完成后，DG Broker show database發現以下告警信息： Database Warning(s):ORA-16826: apply service state is inconsistent with the DelayMins propertyORA-16789: standby redo log…
閱讀更多...
開源與閉源之爭：AI時代的創新博弈與未來抉擇

開源與閉源之爭：AI時代的創新博弈與未來抉擇

在人工智能技術狂飆突進的今天&#xff0c;開源與閉源之爭已不再局限于技術圈的討論&#xff0c;而是演變為一場關乎技術倫理、商業格局乃至人類文明走向的深度博弈。當Meta的Llama 3開源模型下載量突破百萬&#xff0c;當OpenAI的GPT-5繼續加固技術壁壘&#xff0c;這場沒有硝…
閱讀更多...
NIFI的處理器:JSLTTransformJSON 2.4.0

NIFI的處理器:JSLTTransformJSON 2.4.0

該處理器使用JSLT轉換FlowFile JSON有效負載的格式。使用轉換后的內容創建新的FlowFile&#xff0c;并將其路由到“成功”關系。如果JSLT轉換失敗&#xff0c;則將原始FlowFile路由到“失敗”關系。 需要注意的是&#xff0c;編譯JSLT轉換可能相當昂貴。理想情況下&#xff0c…
閱讀更多...
MySQL 索引失效及其解決辦法

MySQL 索引失效及其解決辦法

一、前言 在數據庫優化中，索引（Index）是一項至關重要的技術手段，可以顯著提升查詢性能。然而，在實際開發過程中，MySQL 索引并不總是如預期生效。本文將從原理出發，系統地介紹索引失效的常見場景及其解決方案，幫助開發者有效規避性能陷阱。 二、索引基礎回顧 MySQL 支…
閱讀更多...
趨勢觸發策略

趨勢觸發策略

趨勢觸發策略（TS版）是一種基于TrendTriggerFactor（TTF）的交易策略，通過柱狀圖顏色變化指示市場趨勢的強度，并根據TTF的穿越信號進行買賣操作。 TTF是通過計算買方力量和賣方力量的差值除以兩者之和的一半再乘以100得到的。 當TTF大于100時，柱狀圖顯示為綠色，表示市場…
閱讀更多...
DeepSeek-R1 模型現已在亞馬遜云科技上推出

DeepSeek-R1 模型現已在亞馬遜云科技上推出

亞馬遜云科技提供眾多免費云產品&#xff0c;可以訪問&#xff1a;亞馬遜云科技 在剛剛過去的 Amazon re&#xff1a;Invent 期間&#xff0c;Amazon 首席執行官 Andy Jassy 分享了從 Amazon 自己在全公司開發近 1000 個生成式 AI 應用程序的經驗中汲取的寶貴經驗。從這種廣泛…
閱讀更多...
中臺項目-微前端qiankun-umimax

中臺項目-微前端qiankun-umimax

學習視頻&#x1f50a; 基礎&#xff1a; 黑馬前端基于qiankun搭建微前端項目實戰教程_嗶哩嗶哩_bilibili 路由、部署配置注意&#xff1a;qiankunvite微前端上線注意事項&#xff0c;base公共路徑設置_嗶哩嗶哩_bilibili 微前端 什么是微前端&#xff1f; 微前端是將前端應…
閱讀更多...
【Java學習筆記】代碼塊

【Java學習筆記】代碼塊

代碼塊 介紹&#xff1a;代碼塊又稱為初始化塊&#xff0c;屬于類中的成員&#xff08;即是類的一部分&#xff09;&#xff0c;類似于方法&#xff0c;將邏輯語句封裝在方法體中&#xff0c;通過{}包圍起來 與類方法的不同點 無方法名 無返回類型 無參數 只有方法體&#…
閱讀更多...
最新文章

Copyright @ 2022~2023