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

關于element?ui?表格中的常見特殊屬性說明

 更新時間：2022年08月09日 15:35:35   作者：曾經(jīng)的你d  
這篇文章主要介紹了關于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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論