行间隔及行边框效果

<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