element-ui Table 表格行间隔及行边框效果

<el-table
     :data="tableData"
     style="width: 100%"
     :cell-class-name="tableCellClassName"
   >
</el-table>

methods:{
//用来修改单元格css
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return 'cell-start'
      } else if (columnIndex == 9) {
        return 'cell-end'
      } else {
        return 'cell-middle'
      }
    }  
}<style>

 .cell-start {
  border-top: 1px solid #ebeff0;
  border-bottom: 1px solid #ebeff0 !important;
  border-left: 1px solid #ebeff0;
}
.cell-end {
  border-top: 1px solid #ebeff0;
  border-bottom: 1px solid #ebeff0 !important;
  border-right: 1px solid #ebeff0;
}
.cell-middle {
  border-top: 1px solid #ebeff0;
  border-bottom: 1px solid #ebeff0 !important;
}


.el-table__body {  这行代码为间隔效果！！！
  border-spacing: 0px 6px !important;
}
.el-table td {
  height: 56px;
}
.el-table__body tr:hover > .cell-middle {
  border-top: 1px solid #18AFE5;
  border-bottom: 1px solid #18AFE5 !important;
}
.el-table__body tr:hover > .cell-start {
  border-top: 1px solid #18AFE5;
  border-bottom: 1px solid #18AFE5 !important;
  border-left: 1px solid #18AFE5;
}
.el-table__body tr:hover > .cell-end {
  border-top: 1px solid #18AFE5;
  border-bottom: 1px solid #18AFE5 !important;
  border-right: 1px solid #18AFE5;
}

</style>

以上为行边框及间隔效果

不知道间隔怎么回事，仔细看css 谢谢！！

 

看完代码以后看效果

 

 

 实现element方面 行间隔与边框效果，elementui在这方面真滴lj