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

修改背景色

                 <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:

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/即可实现