在vue项目中使用element-ui的el-table表格组件(持续更新)_在vue中使用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;
}
1
2
3
4
5
6
7
8
9
10

2、修改表头的背景颜色

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

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

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

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

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

 <el-table
          ref="table"
          :data="tableData"
          :max-height="tableHeight"
          style="width: 100%;font-size: 10px "
>
.......
 mounted() {
    //自适应高度
    let h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.bo
1
2
3
4
5
6
7
8
9
10
11
12