vue+elementUI實現固定table超過設定高度顯示下拉條

解決方案:
?

在表格上添加了style="height: px;":max-height="",這兩個設置共同作用使表格在內容超過 設定高度時顯示滾動條配合css使用

高度值可根據實際需求調整

<el-table:data="biddData"style="width: 100%; margin-top: 10px; height: 900px;"
row-key="id"
:border="false"
lazy
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
class="horizontal-line-table table-scroll"
:header-cell-style="{background:'#42b983', color: '#ffffff'}"
@selection-change="handleSelectionChange"
ref="multipleTable"
:max-height="900">
<el-table-columntype="selection"align="center"width="50">
</el-table-column>
<el-table-columnprop="mlname"label="名稱"width="300"><template slot-scope="scope"><el-buttonv-if="scope.row.filecode === '1'"type="text"@click="handleClick(scope.row)">{{ scope.row.mlname }}</el-button><span v-else>{{ scope.row.mlname }}</span></template>
</el-table-column>
<el-table-columnprop="filetype"align="center"label="文件分類">
</el-table-column>
<el-table-columnprop="createtime"align="center"label="上傳日期">
</el-table-column>
</el-table>
/* 表格滾動樣式 */
.table-scroll {.el-table__body-wrapper {overflow-y: auto; /* 垂直滾動 */max-height: 900px; /* 與表格max-height保持一致 *//* 滾動條美化 (可選) */&::-webkit-scrollbar {width: 6px;}&::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 3px;}&::-webkit-scrollbar-track {background-color: #f5f5f5;}}/* 處理樹形表格展開圖標對齊問題 */.el-table__expand-column {vertical-align: middle !important;}
}

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

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

相關文章

UNet改進(5):線性注意力機制(Linear Attention)-原理詳解與代碼實現

引言 在計算機視覺領域&#xff0c;UNet架構因其在圖像分割任務中的卓越表現而廣受歡迎。近年來&#xff0c;注意力機制的引入進一步提升了UNet的性能。本文將深入分析一個結合了線性注意力機制的UNet實現&#xff0c;探討其設計原理、代碼實現以及在醫學圖像分割等任務中的應…

Unity技能編輯器深度構建指南:打造專業級戰斗系統

本文為技術團隊提供完整的技能編輯器開發指南&#xff0c;涵蓋核心架構設計、資源管線搭建和協作工作流實現&#xff0c;幫助您構建專業級的戰斗技能系統。 一、核心架構設計 1. 基礎框架搭建 專用場景模板&#xff1a; 創建SkillEditorTemplate.unity場景 核心節點&#xff…

《游戲工業級CI/CD實戰:Jenkins+Node.js自動化構建與本地網盤部署方案》

核心架構圖 一、游戲開發CI/CD全流程設計 工作流時序圖 二、Jenkins分布式構建配置 1. 節點管理&#xff08;支持Win/Linux/macOS&#xff09; // Jenkinsfile 分布式配置示例 pipeline {agent {label game-builder // 匹配帶標簽的構建節點}triggers {pollSCM(H/5 * * * *)…

Python內存使用分析工具深度解析與實踐指南(上篇)

文章目錄 引言1. sys.getsizeof()功能程序示例適用場景 2. pandas.Series.memory_usage()功能程序示例適用場景 3. pandas.Series.memory_usage(deepTrue)功能程序示例適用場景注意事項 4. pympler.asizeof()功能安裝程序示例適用場景 5. tracemalloc&#xff08;標準庫&#x…

Python 使用 Requests 模塊進行爬蟲

目錄 一、請求數據二、獲取并解析數據四、保存數據1. 保存為 CSV 文件2. 保存為 Excel 文件打開網頁圖片并將其插入到 Excel 文件中 五、加密參數逆向分析1. 定位加密位置2. 斷點調試分析3. 復制相關 js 加密代碼&#xff0c;在本地進行調試&#xff08;難&#xff09;4. 獲取 …

MySQL行轉列、列轉行

要達到的效果&#xff1a; MySQL不支持動態行轉列 原始數據&#xff1a; 以行的方式存儲 CREATE TABLE product_sales (id INT AUTO_INCREMENT PRIMARY KEY,product_name VARCHAR(50) NOT NULL,category VARCHAR(50) NOT NULL,sales_volume INT NOT NULL,sales_date DATE N…

云創智稱YunCharge充電樁互聯互通平臺使用說明講解

云創智稱YunCharge充電樁互聯互通平臺使用說明講解 一、云創智稱YunCharge互聯互通平臺簡介 云創智稱YunCharge&#xff08;YunCharge&#xff09;互聯互通平臺&#xff0c;旨在整合全國充電樁資源&#xff0c;實現多運營商、多平臺、多用戶的統一接入和管理&#xff0c;打造開…

HTML+JS實現類型excel的純靜態頁面表格,同時單元格內容可編輯

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>在線表格</title><style>table {border…

Gartner金融AI應用機會雷達-學習心得

一、引言 在當今數字化時代,人工智能(AI)技術正以前所未有的速度改變著各個行業,金融領域也不例外。財務團隊面臨著如何從AI投資中獲取最大價值的挑戰。許多首席財務官(CFO)和財務領導者期望在未來幾年增加對AI的投入并從中獲得更多收益。據調查,90%的CFO和財務領導者預…

像素著色器沒有繪制的原因

背景 directX調用了 draw&#xff0c;頂點著色器運行&#xff0c;但是像素著色器沒有運行。 原因 光柵化階段被剔除 說明&#xff1a;如果幾何圖元&#xff08;如三角形&#xff09;在光柵化階段被剔除&#xff0c;像素著色器就不會被調用。常見剔除原因&#xff1a; 背面…

jenkins對接、jenkins-rest

https://www.bilibili.com/video/BV1RqNRz5Eo6 Jenkins是一款常見的構建管理工具&#xff0c;配置好后操作也很簡單&#xff0c;只需去控制臺找到對應的項目&#xff0c;再輸入分支名即可 如果每次只發個位數的項目到也還好&#xff0c;一個個進去點嘛。但如果一次要發幾十個項…

北斗導航深度接入小程序打車:高精度定位如何解決定位漂移難題?

你有沒有遇到過這樣的尷尬&#xff1a; 在寫字樓、地下車庫或密集樓群中叫車&#xff0c;系統顯示的位置和你實際所在位置差了幾十米甚至上百米&#xff1b;司機因為找不到你而繞圈&#xff0c;耽誤時間還多花平臺費用&#xff1b;有時明明站在A出口&#xff0c;司機卻跑到B口…

MySQL 主要集群解決方案

MySQL 主要有以下幾種集群解決方案&#xff0c;每種方案針對不同的應用場景和需求設計&#xff1a; 1. MySQL Replication&#xff08;主從復制&#xff09; 類型&#xff1a;異步/半同步復制架構&#xff1a;單主多從特點&#xff1a; 讀寫分離&#xff0c;主庫寫&#xff0c…

基于vue3+express的非遺宣傳網站

? 一個課程大作業&#xff0c;需要源碼可聯系&#xff0c;可以在http://8.138.189.55:3001/瀏覽效果 前端技術 Vue.js 3&#xff1a;我選擇了Vue 3作為核心前端框架&#xff0c;并采用了其最新的Composition API開發模式&#xff0c;這使得代碼組織更加靈活&#xff0c;邏輯…

【7】圖像變換(上)

本節偏難,不用過于深究 考綱 文章目錄 可考題【簡答題】補充第三版內容:圖像金字塔2023甄題【壓軸題】習題7.1【第三版】1 基圖像2 與傅里葉相關的變換2.1 離散哈特利變換(DHT)可考題【簡答題】2.2 離散余弦變換(DCT)2021甄題【簡答題】2.3 離散正弦變換(DST)可考題【簡…

WinUI3入門9:自制SplitPanel

初級代碼游戲的專欄介紹與文章目錄-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代碼都將會位于ctfc庫中。已經放入庫中我會指出在庫中的位置。 這些代碼大部分以Linux為目標但部分代碼是純C的&#xff0c;可以在任何平臺上使用。 源碼指引&#xff1a;github源…

【面板數據】上市公司投資者保護指數(2010-2023年)

上市公司投資者保護指數是基于上市公司年報中公開披露的多項內容&#xff0c;從信息透明度、公司治理結構、關聯交易披露、控股股東行為規范等多個維度&#xff0c;評估企業是否在制度上和實際操作中有效保障投資者&#xff0c;特別是中小投資者的合法權益。本分享數據基于我國…

如何解決USB遠距離傳輸難題?一文了解POE USB延長器及其行業應用

在日常辦公、教學、醫療和工業系統中&#xff0c;USB接口設備扮演著越來越關鍵的角色。無論是視頻采集設備、鍵盤鼠標&#xff0c;還是打印機、條碼槍&#xff0c;USB早已成為主流連接標準。然而&#xff0c;USB原生傳輸距離的限制&#xff08;通常在5米以內&#xff09;常常成…

PostgreSQL(TODO)

(TODO) 功能MySQLPostgreSQLJSON 支持支持&#xff0c;但功能相對弱非常強大&#xff0c;支持 JSONB、索引、函數等并發控制行級鎖&#xff08;InnoDB&#xff09;&#xff0c;不支持 MVCC多版本并發控制&#xff08;MVCC&#xff09;&#xff0c;性能更好存儲過程/觸發器支持&…

LINUX 623 FTP回顧

FTP 權限 /etc/vsftpd/vsftpd.conf anonymous_enableNO local_enableNO 服務器 .20 [rootweb vsftpd]# grep -v ^# vsftpd.conf anonymous_enableNO local_enableYES local_root/data/kefu2 chroot_local_userYES allow_writeable_chrootYES write_enableYES local_umask02…