element -ui之<el-table>

　　在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 }

　　　　　}

　　　}

　　　　这样的效果也是可以起到效果的，而且并不会出现意料之外的惊喜