關(guān)于element?ui?表格中的常見特殊屬性說明
element ui 表格的常見特殊屬性 1，表格內(nèi)容太多用...表示2，修改element ui自帶的樣式3，修改奇數(shù)行背景色4，給表頭添加背景色及文字樣式5，表頭文字豎向排列(文字帶括號(hào))6，表頭邊框與文本邊框?qū)Σ积R情況7，導(dǎo)航欄的側(cè)邊欄只展開一個(gè)下拉菜單8，表格表頭和內(nèi)容居中顯示9，添加表格背景色10，鼠標(biāo)移入表格高亮顯示當(dāng)前行
1，表格內(nèi)容太多用…表示
有時(shí)候表格內(nèi)容太多一行顯示不下，但是又不想換行，換行影響表格美觀程度。
解決：在每一行中加：show-overflow-tooltip
效果圖：
代碼：
普通css樣式的…
white-space:nowrap;//不換行 overflow: hidden;//超出隱藏 text-overflow: ellipsis;//變成...
2，修改element ui自帶的樣式
有時(shí)候element ui自帶的樣式不符合我們的要求，就需要去手動(dòng)修改，在vue 的less中直接修改是修改不成功的。
解決：在需要修改的類前加一個(gè) /deep/
代碼：
3，修改奇數(shù)行背景色
代碼：
/deep/ .el-table--enable-row-transition .el-table__body td { background： red; }
效果圖：
4，給表頭添加背景色及文字樣式
代碼：
：header-cell-style="{background：'#DDDEE0'，color：'#52545A'}"5，表頭文字豎向排列(文字帶括號(hào))
給沒列一個(gè)固定寬度，再設(shè)置一個(gè)字間距即可
<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;
}
效果圖：
拓展：表格中的左右括號(hào)會(huì)顯示不出來，需要用上下括號(hào)：︵ 起 ︶，起字左右都有一個(gè)空格。
6，表頭邊框與文本邊框?qū)Σ积R情況
問題：
解決：
方法：
在全局中(app.vue)加下面這段代碼即可，表示所有的頁面中的表格都可以作用的到，在單個(gè)頁面中加就只能在當(dāng)前頁面可以使用。
body .el-table th.gutter {
display: table-cell !important
}
7，導(dǎo)航欄的側(cè)邊欄只展開一個(gè)下拉菜單
只展開一個(gè)下拉菜單，其余收縮。
在菜單頭部加：unique-opened
8，表格表頭和內(nèi)容居中顯示
//表格居中
/deep/.el-table td,/deep/.el-table th{
text-align: center;
}
9，添加表格背景色
<el-table :header-cell-style="headClass"></el-table>
// 表格標(biāo)題
headClass() {
return 'background:#bbdaf9;font-weight:normal;color:#000;'
},
10，鼠標(biāo)移入表格高亮顯示當(dāng)前行
// 鼠標(biāo)移入表格
/deep/ .el-table--enable-row-hover {
.el-table__body tr:hover > td {
background: #FFC000;
color: #fff;
}
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue :style設(shè)置背景圖片方式backgroundImage
這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
前端項(xiàng)目vue3/React如何使用pako庫解壓縮后端返回gzip數(shù)據(jù)
pako是一個(gè)流行的JS庫,用于在瀏覽器中進(jìn)行數(shù)據(jù)壓縮和解壓縮操作,它提供了對(duì)常見的壓縮算法的實(shí)現(xiàn),使開發(fā)者能夠在客戶端上輕松進(jìn)行數(shù)據(jù)壓縮和解壓縮,這篇文章主要介紹了前端項(xiàng)目vue3/React使用pako庫解壓縮后端返回gzip數(shù)據(jù),需要的朋友可以參考下2024-07-07
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+elementUI組件table實(shí)現(xiàn)前端分頁功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了詳解vue-cli3多頁應(yīng)用改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法，本文是通過一系列的配置后，轉(zhuǎn)換成熱門，具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-10-10
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05