elementUI el-table样式修改

最新推荐文章于 2024-07-30 10:39:47 发布

qq_41649755

最新推荐文章于 2024-07-30 10:39:47 发布

阅读量3.9k

点赞数 9

文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_41649755/article/details/106646826

版权

本文介绍了如何修改elementUI的el-table组件样式，包括调整行高、表头高度、单元格内边距以及表头宽度，以适应不同场景的需求。通过设置row-style、header-row-style、cell-style和header-cell-style等属性，实现了表格样式的个性化定制。同时，针对多列标题长度不一的问题，提出了通过自定义宽度解决表头宽度调整的方案。

摘要由CSDN通过智能技术生成

问题描述

elementUI提供的组件间距、样式都比较大，如果直接套用，在页面显示可能就会显得很大，就比如表格，表头、行宽如果不修改的话，遇到列较多的时候，会显得整个页面就不好看。

解决方案

这里记录一下自己目前所收集的以及最终用到的表格样式修改成功的实现代码。

首先将代码全部贴出来：

<el-table
      :data="tableData"
      :row-style="{height:'15px'}"
      :header-row-style="{height:'20px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{padding:'0px',background:'#eef1f6'}"
      stripe
      border
      highlight-current-row
      style="width: 50%">
</el-table>