關于element?ui?表格中的常見特殊屬性說明
element ui 表格的常見特殊屬性 1,表格內容太多用...表示2,修改element ui自帶的樣式3,修改奇數(shù)行背景色4,給表頭添加背景色及文字樣式5,表頭文字豎向排列(文字帶括號)6,表頭邊框與文本邊框對不齊情況7,導航欄的側邊欄只展開一個下拉菜單8,表格表頭和內容居中顯示9,添加表格背景色10,鼠標移入表格高亮顯示當前行
1,表格內容太多用…表示
有時候表格內容太多一行顯示不下,但是又不想換行,換行影響表格美觀程度。
解決:在每一行中加:show-overflow-tooltip
效果圖:
代碼:
普通css樣式的…
white-space:nowrap;//不換行 overflow: hidden;//超出隱藏 text-overflow: ellipsis;//變成...
2,修改element ui自帶的樣式
有時候element ui自帶的樣式不符合我們的要求,就需要去手動修改,在vue 的less中直接修改是修改不成功的。
解決:在需要修改的類前加一個 /deep/
代碼:
3,修改奇數(shù)行背景色
代碼:
/deep/ .el-table--enable-row-transition .el-table__body td { background: red; }
效果圖:
4,給表頭添加背景色及文字樣式
代碼:
:header-cell-style="{background:'#DDDEE0',color:'#52545A'}"
5,表頭文字豎向排列(文字帶括號)
給沒列一個固定寬度,再設置一個字間距即可
<el-table-column prop="dh" align="center" label="電話" width="105"></el-table-column>
/deep/ .el-table thead.is-group th{ letter-spacing: 16px; text-align: center; }
效果圖:
拓展:表格中的左右括號會顯示不出來,需要用上下括號:︵ 起 ︶,起字左右都有一個空格。
6,表頭邊框與文本邊框對不齊情況
問題:
解決:
方法:
在全局中(app.vue)加下面這段代碼即可,表示所有的頁面中的表格都可以作用的到,在單個頁面中加就只能在當前頁面可以使用。
body .el-table th.gutter { display: table-cell !important }
7,導航欄的側邊欄只展開一個下拉菜單
只展開一個下拉菜單,其余收縮。
在菜單頭部加:unique-opened
8,表格表頭和內容居中顯示
//表格居中 /deep/.el-table td,/deep/.el-table th{ text-align: center; }
9,添加表格背景色
<el-table :header-cell-style="headClass"></el-table> // 表格標題 headClass() { return 'background:#bbdaf9;font-weight:normal;color:#000;' },
10,鼠標移入表格高亮顯示當前行
// 鼠標移入表格 /deep/ .el-table--enable-row-hover { .el-table__body tr:hover > td { background: #FFC000; color: #fff; } }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能
這篇文章主要介紹了vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能,需本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01vue-cli3項目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關于vue-cli3項目配置eslint代碼規(guī)范的完整步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09詳解mpvue中使用vant時需要注意的onChange事件的坑
這篇文章主要介紹了詳解mpvue中使用vant時需要注意的onChange事件的坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue實現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號url)
這篇文章主要介紹了Vue實現(xiàn)hash模式網(wǎng)址方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue3中ref和reactive的基本使用及區(qū)別詳析
這篇文章主要給大家介紹了關于Vue3中ref和reactive的基本使用及區(qū)別的相關資料,需要的朋友可以參考下2022-07-07