在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 }
}
}
这样的效果也是可以起到效果的，而且并不会出现意料之外的惊喜