elementui 中表格去除表格线以及添加背景

修改背景色

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<el-table    :data="data"    style="width: 95%;margin:0 auto"    :header-cell-style="{ 'text-align': 'center' }"    :cell-style="TableRowStyle"  >    <el-table-column      prop="name"      label="名字"      width="130"    >    </el-table-column>    <el-table-column      prop="address"      label="地址"      show-overflow-tooltip      width="140"    >    </el-table-column>    <el-table-column      prop="time"      label="时间"      width="180"    >    </el-table-column>   </el-table>

　　js:

?

1 2 3 4 5 6 7 8 9 10

TableRowStyle({ row, rowIndex }) {       let tableRowStyle = "";       tableRowStyle = "text-align: center;";       if (rowIndex % 2 == 0) {         console.log("奇数行");         tableRowStyle = tableRowStyle + "background-color: #F8F9FC;";         return tableRowStyle;       }       return tableRowStyle;     },

　　

 

 

 

第二个样式是取消表格横线

首先要在<el-table>外层套一个div，例如div的class为tableClass，利用三箭头深度修改

1、去除表格线，除上下边框线以外的所有线

.tableClass>>> .el-table__row>td{

  border: none;

}

2、去除表格上边框

, .tableClass>>> .el-table th.is-leaf  {

border: none;

}

3、去除表格下边框

.tableClass>>> .el-table::before {

  height: 0;

}

 

 

如果>>>不好用，就用/deep/即可实现