前端在開發PC 端項目時，現在用的比較多的就是Element UI,而在PC端管理系統中，Table 可以說是必不可少，剛開始使用對table沒有做過多的處理，可是在需要做一些處理時，對其文檔不熟悉使用不熟練總出現一些意想不到的問題。
表頭和內容錯位：
解決在全局中添加 樣式可解決：
.el-table th.gutter {
display: table-cell !important;
}
自定義table 邊框及單元格邊框
表格設置的border 覆蓋掉自定義的border 而且只在最後一列，因爲默認是灰色一直以爲自己設定的沒有生效 開兩個效果吧
沒有添加table 的 border 屬性
添加table 的 border 屬性之後 ，看最右側的邊框 目前看到的是border 的效果，其實是最調整電腦屏幕的時候這個線是蓋掉了自定義的邊框的 ，爲什麼別的沒被覆蓋，其實在我的感覺是最後一個自定義的border 和 table 的border 屬性邊框沒有重合導致在不同寬度下展示的是不一樣的。
給table 添加border 屬性的代碼如下 分別給table header cell 設置 border ，以避免border 合併後比變粗
<el-table :data="tabledata" border cell-class-name="cellStyle" header-cell-class-name="headerCellStyle" class="table" style="width:100%">
<el-table-column v-for="(item, index) in labelKeys" :label="item.label" :prop="item.key" :key="index" show-overflow-tooltip></el-table-column>
</el-table>
====================style===========================================
.table {
border: 1px solid rgb(68, 67, 67);
border-right: none;
}
.headerCellStyle {
border-bottom: 1px solid rgb(68, 67, 67) !important;
border-right: 1px solid rgb(68, 67, 67);
}
.cellStyle {
border-bottom: 1px solid rgb(68, 67, 67);
border-right: 1px solid rgb(68, 67, 67);
}
table column 設置寬度帶來的問題 選 width 還是 min-width
如果給el-table-column設置了width 寬度，如果所有的column 寬度加起來沒有table 分到的寬度高 會出現空餘的部分 ，如下圖：
那麼試試 min-width 呢 ？看官方文檔描述：對應列的最小寬度，與 width 的區別是 width 是固定的，min-width 會把剩餘寬度按比例分配給設置了 min-width 的列
改成把min-width 之後完全不會有寬度適應的問題了，那麼以後要設置寬度的時候可以選他嘍 ，如果width 和 min-width 都不設置 其實是會按照內容作相應分配的 也會撐滿。
單元格設置不換行
對於單元格的內容是否支持換行 ，可以用屬性 show-overflow-tooltip 會自動不換行 如果有溢出隱藏，鼠標移到對應的內容會出出現完整的內容提示。
| show-overflow-tooltip | 當內容過長被隱藏時顯示 tooltip |
以上記錄總結。