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

最新推荐文章于 2025-04-24 14:05:08 发布

MRSLLLL_

最新推荐文章于 2025-04-24 14:05:08 发布

阅读量3.4k

点赞数

分类专栏： vue相关文章标签：前端 element-UI vue

本文链接：https://blog.csdn.net/MRSLLLL_/article/details/102565972

版权

vue相关专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Vue项目中使用element-ui的el-table组件进行表格展示时的一些常见配置和优化，包括修改表格行高、表头背景颜色、解决列对齐问题、移动端自适应、自定义滚动条样式、行 hover 颜色以及通过row-class-name设置特定行样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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表示当前屏幕下的可视高度-元素参照定位的上边的距离

 <el-table
          ref="table"
          :data="tableData"
          :max-height="tableHeight"
          style="width: 100%;font-size: 10px "
>
.......
 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
在这里插入图片描述

        <el-table
          ref="table"
          :data="newTableData"
          :max-height="tableHeight"
          :row-class-name="tableRowClassName"
          border
          style="width: 100%;font-size: 10px "
        >

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