欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于element?ui?表格中的常見特殊屬性說(shuō)明

 更新時(shí)間：2022年08月09日 15:35:35   作者：曾經(jīng)的你d  
這篇文章主要介紹了關(guān)于element?ui?表格中的常見特殊屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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ì)顯示不出來(lái)，需要用上下括號(hào)：︵ 起 ︶，起字左右都有一個(gè)空格。

6，表頭邊框與文本邊框?qū)Σ积R情況

問(wèn)題：

解決：

方法：

在全局中(app.vue)加下面這段代碼即可，表示所有的頁(yè)面中的表格都可以作用的到，在單個(gè)頁(yè)面中加就只能在當(dāng)前頁(yè)面可以使用。

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)文章

最新評(píng)論