在vue项目中使用element-ui的el-table表格组件(持续更新)

1、修改tr th高度

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
}

2、修改表头的背景颜色

.el-table th {
      background-color: #c80100;
}

3、解决element-ui的table表格控件表头与内容列不对齐问题

   .el-table th.gutter{
    display: table-cell!important;
  }

4.在移动端中实现不同高度自适应

• 加上ref=“table”,可以在mounted中通过this.$refs.table获取要操作的el-table元素
• h表示当前屏幕下的可视高度-元素参照定位的上边的距离

 
.......
 mounted() {
    //自适应高度
    let h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.tableHeight = h - this.$refs.table.$el.offsetTop - 10;
}

5、修改滚动条样式

  .slot::-webkit-scrollbar {
    width: 1px;
  }

  .slot::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 30px;
    background: #ccc;
  }

  .slot::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
  }
  .el-table--border td:first-child .cell {
    padding-left: 1px;
  }

6、修改每行鼠标hover时的背景颜色

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #fff !important;
  }

7、通过row-class-name给所选行设置一个固定的class样式
类似下面图片,合计部分背景颜色需要标亮,并且没有排名的字段rownums

 //合计行换色
    tableRowClassName({ row, rowIndex }) {
    //如果行的字段中没有rownums,就给改行添加背景颜色
      if (!("rownums" in row)) {
        return "totalColor";
      }
    },