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

element-ui Table 表格行间隔及行边框效果的相关教程结束。