在vue的后台項目中，我們經常會用到element-ui這個ui框架，里邊很多的組件都是很好用的，特別是表格 el-table 組件，除了常用到的 el-table-column中的 prop、width、label、以及align之外我們還經常會用到slot進行自定義顯示的內容；
例如： <el-table-column>
<template slot-scope='scope'>
{{scope.row.type?scope.row.type: '---'}}
</temloate>
</el-table-column>
在使用slot-scope的時候需要注意，如果表格有經過 v-if 進行切換的話，這樣對slot-scope的數據渲染會有一定的影響，致使不能加載，所以最好使用 v-show 來進行切換
如果在表格寬度比較寬的情況下，會遇到某一個單元格的寬度比較小，而不成單行容下內容的情況，這時候我們若想讓其單行隱藏成 ... 的形式，那么我們可以給這一列單獨加上 :show-overflow-tooltip = 'true'，當我們把鼠標放在上邊的時候就會有類似title的屬性作用，彈出整個的單元格內容；
此外，有時候我們在使用 <el-table>的時候，若要設置表頭的樣式，我們可以使用 ：header-cell-style='{ }'，來進行設定；
在使用的過程中，遇到過這樣的問題，一個頁面同時使用兩個table的時候，會有時候某個表格的最下邊會多出來一行邊框，以及某一行出現的這樣的情況，這是組件自己加了 一個：before元素，設定了寬度但是內容content = ''的原因造成了，出現這樣的問題，一般就要手動了找到是哪個元素默認添加的，然后在 scss中重新設定一下，並將其高度設置為0即可
el-table中存在合並行和合並列的情況，假如按照官網的方式，將第一列的前五個合並為一個單元格，並將第一列的第六行第七行荷合並為一個單元格，那么我們可以這樣進行處理：
method( row, column, rowIndex, columnIndex){
if( columnIndex === 0){
if( rowIndex ===0){
return{ rowspan: 5, colspan: 0 }
} else if( rowIndex === 5 ){
return{ rowspan: 2, colspan: 0 }
} else {
return{ rowspan: 0, colspan: 0 }
}
}
}
然而這樣寫，頁面總是會出出現一些意想不到的效果；
method( row, column, rowIndex, columnIndex){
if( columnIndex === 0 && rowIndex ===0 ){
return{ rowspan: 5, colspan: 0 }
}
if( columnIndex === 0 && rowIndex ===5 ){
return{ rowspan: 2, colspan: 0 }
}
if( columnIndex === 0 && rowIndex !==0 && rowIndex !==5){
return{ rowspan: 0, colspan: 0 }
}
}
這樣的效果也是可以起到效果的，而且並不會出現意料之外的驚喜