Element UI 設置 el-table-column 寬度 width 為百分比無效

問題描述: 想要每列寬度不同,不想使用 px 固定值,將 width 設置成百分比,但是每一列還是很窄

在這里插入圖片描述

原因: el-table 組件會被 vue 解析成 html,vue 直接把百分號去掉把數值當做列寬來呈現,所以,width 設置百分比的值直接被解析去掉百分號% 變成 px 了

解決方案: 使用 min-width 代替 width

需要注意的是:width,min-width 的原理都是將值百分比去掉變成 px,可是 min-width 會按照比例分配剩余空間,并非直接算的百分比。因此要每一列都設置 min-width 才能實現每一列的百分比配置,設置成 min-width 以后,width 的值就被計算成 (當前值 / 全部列值和)的百分比了

<el-table v-loading="loading" :data="tableData"><el-table-column prop="id" label="ID" min-width="6%"></el-table-column><el-table-column prop="name" label="姓名" min-width="12%"></el-table-column><el-table-column prop="create_time" label="創建時間" min-width="24%"></el-table-column><el-table-column prop="update_time" label="更新時間" min-width="24%"></el-table-column>
</el-table>

在這里插入圖片描述

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

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

相關文章

第五篇:Python面向對象編程(OOP)深度教程

1. 類與對象 1.1 基本概念 ??類??是創建對象的藍圖,定義了對象的??屬性??(數據)和??方法??(行為)。??對象??是類的實例化實體,每個對象擁有獨立的屬性值和共享的類方法 ??示例??:定義Dog類 class Dog:species = "Canis familiaris" …

【數據結構】2.順序表實現通訊錄

文章目錄 一、通訊錄的要求二、通訊錄的具體實現0、 準備工作1、通訊錄的初始化2、通訊錄的銷毀3、通訊錄的展示4、通訊錄添加數據5、通訊錄刪除數據6、通訊錄的查找7、通訊錄的修改8、保存通訊錄數據到文件9、讀取文件內容到通訊錄 三、 通訊錄的完整實現 一、通訊錄的要求 通…

程序化廣告行業(79/89):技術革新與行業發展脈絡梳理

程序化廣告行業&#xff08;79/89&#xff09;&#xff1a;技術革新與行業發展脈絡梳理 大家好&#xff01;一直以來&#xff0c;我都熱衷于在技術領域不斷探索&#xff0c;也深知知識共享對于進步的重要性。寫這篇博客&#xff0c;就是希望能和大家一起深入研究程序化廣告行業…

【C++游戲引擎開發】第9篇:數學計算庫GLM(線性代數)、CGAL(幾何計算)的安裝與使用指南

寫在前面 兩天都沒手搓實現可用的凸包生成算法相關的代碼&#xff0c;自覺無法手搓相關數學庫&#xff0c;遂改為使用成熟數學庫。 一、GLM庫安裝與介紹 1.1 vcpkg安裝GLM 跨平臺C包管理利器vcpkg完全指南 在PowerShell中執行命令&#xff1a; vcpkg install glm# 集成到系…

python文件打包無法導入ultralytics模塊

&#x1f4a5;打包的 .exe 閃退了&#xff1f;別慌&#xff01;教你逐步排查 PyInstaller 打包的所有錯誤&#xff01; &#x1f6e0; 運行 .exe 查看報錯信息? 正確姿勢&#xff1a; ? importlib 動態導入導致打包失敗?什么是動態導入&#xff1f;? 解決方式&#xff1a; …

【React框架】什么是 Vite?如何使用vite自動生成react的目錄?

什么是 Vite&#xff1f; Vite 是一個基于原生 ES Modules 開發的前端構建工具&#xff0c;由 Evan You&#xff08;Vue 的作者&#xff09;開發。它最大的特點包括&#xff1a; 極速冷啟動&#xff1a;因為利用了瀏覽器原生的 ES Modules&#xff0c;所以在開發時無需等待整…

深入解讀 React 純組件(PureComponent)

什么是純組件&#xff1f; React 的純組件(PureComponent)是 React.Component 的一個變體&#xff0c;它通過淺比較(shallow comparison)props 和 state 來自動實現 shouldComponentUpdate() 方法&#xff0c;從而優化性能。 核心特點 1. 自動淺比較&#xff1a; PureCompon…

JavaScript數組方法:`some()`的全面解析與應用

文章目錄 JavaScript數組方法&#xff1a;some()的全面解析與應用一、some()方法的基本概念語法參數說明返回值 二、some()方法的核心特點三、基礎用法示例示例1&#xff1a;檢查數組中是否有大于10的元素示例2&#xff1a;檢查字符串數組中是否包含特定子串 四、實際應用場景1…

判斷兩個 IP 地址是否在同一子網 C

#include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> // 將點分十進制的 IP 地址轉換為 32 位無符號整數 unsigned int ip_to_uint(const char *ip) { struct in_addr addr; if (inet_pton(AF_INET, ip, &am…

React 組件樣式

在這里插入圖片描述 分為行內和css文件控制 行內 通過CSS中類名文件控制

尚硅谷Java第 4、5 章IDEA,數組

第 4 章&#xff1a;IDEA的使用 第 5 章&#xff1a;數組 5.1 數組的概述 數組(Array)&#xff1a;就可以理解為多個數據的組合。 程序中的容器&#xff1a;數組、集合框架&#xff08;List、Set、Map&#xff09;。 數組中的概念&#xff1a; 數組名 下標&#xff08;或索…

SQL注入基本原理靶場實現

? 一、前言 SQL注入漏洞(SQL injection)是WEB層面高危的漏洞之一&#xff0c;也是常見的攻擊方式。 二、本質 1、什么是SQL注入 SQL 注入是一種利用應用程序對用戶輸入數據過濾不嚴格&#xff0c;將惡意 SQL 代碼插入到正常 SQL 語句中&#xff0c;從而操控數據庫查詢邏輯的…

圖像預處理(OpenCV)

1 圖像翻轉(圖像鏡像旋轉) 在OpenCV中&#xff0c;圖片的鏡像旋轉是以圖像的中心為原點進行鏡像翻轉的。 cv2.flip(img,flipcode) 參數 img: 要翻轉的圖像 flipcode: 指定翻轉類型的標志 flipcode0: 垂直翻轉&#xff0c;圖片像素點沿x軸翻轉 flipcode>0: 水平翻轉&…

PCDN收益高低的關鍵因素

PCDN&#xff08;P2P內容分發網絡&#xff09;收益好的三個主要關鍵因素是&#xff1a;硬件配置與性能、網絡環境與質量、業務調度與策略。 1. 硬件配置與性能 設備穩定性與兼容性 PCDN節點需長時間穩定運行&#xff0c;硬件性能直接影響收益。例如&#xff0c;使用高性能CPU、…

『生成內容溯源系統』詳解

生成內容溯源系統詳解 1. 定義與核心目標 生成內容溯源系統&#xff08;Generative Content Provenance System&#xff09;是指能夠追蹤AI生成內容的來源、生成過程、版權歸屬及修改歷史的技術體系。其核心目標是&#xff1a; 驗證真實性&#xff1a;證明內容由特定AI模型生…

conda如何安裝和運行jupyter

在Conda環境中安裝和運行Jupyter Notebook是一項常見且實用的任務&#xff0c;特別是在數據科學和機器學習項目中。以下是使用Conda安裝和運行Jupyter Notebook的步驟&#xff1a; 安裝Jupyter Notebook 首先&#xff0c;確保你的Conda是最新的。打開終端或Anaconda Prompt&a…

QML之Flickable(滾動區域)

Flickable 是 QML 中用于創建可滾動區域的基礎組件&#xff0c;它比 ScrollView 提供更底層的控制&#xff0c;適合需要自定義滾動行為的場景。 基本用法 qml import QtQuick 2.15Flickable {width: 200height: 200contentWidth: 400 // 內容總寬度contentHeight: 800 // 內…

【NumPy科學計算引擎:從基礎操作到高性能實踐】

目錄 前言&#xff1a;技術背景與價值當前技術痛點解決方案概述目標讀者說明 一、技術原理剖析關鍵技術模塊說明技術選型對比 二、實戰演示環境配置核心代碼實現運行結果驗證 三、性能對比測試方法論量化數據對比結果分析 四、最佳實踐推薦方案 ?常見錯誤 ?調試技巧 五、應用…

PandaGPT實戰(1): 環境配置及效果演示

文章目錄 1. 環境安裝2. 數據準備2.1 模型權重獲取2.2 訓練數據準備3. 效果演示3.1 訓練3.2 部署效果PandaGPT是首個無需顯式監督即能跨六種模態執行指令微調任務的基礎模型。它展現出多樣化的多模態能力,包括復雜理解/推理、基于知識的描述以及多輪對話交互。 作為通用型指令…

spring security oauth2.0 使用GitHub

在 Spring Security 中集成 GitHub 的 OAuth 2.0 登錄&#xff0c;可以實現用戶通過 GitHub 賬號快速認證。以下是完整的分步實現指南和代碼示例&#xff1a; 一、前置準備 1. 在 GitHub 注冊 OAuth 應用 訪問 GitHub Settings → Developer settings → OAuth Apps點擊 New …