el-table的当前选中行样式和滑过行样式自定义

一、需求：表格划过样式自定义：

::v-deep .el-table{

    /* 有时候表格的右边框和下面边框显示不出来，可以设置padding和margin */

    padding-bottom:1px;

    margin-right:1px;

    tbody tr:hover{

      cursor: pointer;

      /* td样式只能设置上下边框 */

      td{

        color:#1BAEAE;

        background-color: #999;

        border-top:1px solid #1BAEAE;

        border-bottom:1px solid #1BAEAE;

        }

      /* 第一个单元格设置左边框和左边圆角 */

      td:nth-child(1){

        border-left:1px solid #1BAEAE;

        border-radius: 4px 0 0 4px;

      }

      /* 最后一个单元格设置右边框和右边圆角 */

      td:last-child{

        border-right:1px solid #1BAEAE;

        border-radius: 0 4px 4px 0;

      }

    }

    /* 常态下的td样式 */

      td{

        border-bottom:1px solid #fff ;

      }

  }

二、当前选中行的自定义样式：

借助以下几个表格方法和属性实现：

 <el-table

          :data="tableData"

          :row-class-name="rowClassName"

          :row-style="rowStyle"

          :cell-style="cellStyle"

          @row-click="rowClick"

          style="width: 100%">

官网解释：

row-class-name  ：

行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。Function({row, rowIndex})/String

可以用它获取每一行的index，但是最后我没有用

row-style：

行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。

Function({row, rowIndex})/Object

如果要改变当前行的样式的话，样式比较简单，没有左右边框圆角什么的就用row-style

cell-style：

单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

Function({row, column, rowIndex, columnIndex})/Object

如果需要改变的当前选中行的样式比较复杂，需要对每个单元格分别处理，就用cell-style

方法：

 

// 单元格样式-这个方法table加载后就会自动执行

  cellStyle(({row, column, rowIndex, columnIndex}){

    // 把每一行的rowIndex放到每一行的row里面存上

    row.index=rowIndex  //这一步也可以用row-class-name来做，我为了省事，就用一个方法写了

    //rowClick行的单击事件触发后：

    const styleObj={}  //定义一个放样式的对象

    if(this.currentIndex===rowIndex){  //找到选中的行,基于行的样式写这里

      styleObj.background='#666'

      styleObj.borderTop='1px solid #666'

      styleObj.borderBottom='1px solid #666'

      //继续判断属于当前行的哪一个td

      if(columnIndex===0){  //第一个td，只有左边框和左边圆角

        styleObj.borderLeft='1px solid #666'

        styleObj.borderRadius='4px 0 0 4px'

      }

      if(columnIndex===2){  //第n个td，只有右边框和右边圆角，这里面也可以取最后一个

        styleObj.borderRight='1px solid #666'

        styleObj.borderRadius='0 4px 4px 0'

      }

      return styleObj

    }

  },

  //存一个全局变量currentIndex来存放当前选中行的index，然后点击表格行的时候，把row里面的index放到currentIndex

  rowClick(row, column, event){

    this.currentIndex = row.index //用到了每行存的index

  }