Vue使用ElementUI的Table组件表头与内容不对齐问题

最新推荐文章于 2024-07-25 15:03:56 发布

谁的青春不迷茫g

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量1k

点赞数 4

分类专栏： web 文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46448867/article/details/129372402

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题描述：用ElementUI开发后台，使用Table组件时，表头与内容不对齐

解决:在全局样式中添加如下css样式

.el-table__header, .el-table__body, .el-table__footer{
width:100% !important;
  table-layout: fixed !important;
}

结果:

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谁的青春不迷茫g

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
Vue使用ElementUI的Table组件表头与内容不对齐问题

用ElementUI开发后台，使用Table组件时，表头与内容不对齐
复制链接

扫一扫

专栏目录

解决element-ui的table表格的表头与内容列对齐问题

huihuiliu_的博客

11-28

5162

直接上代码，就是在style上加一个样式，如果多个页面涉及的表格过多，可定义一个全局样式 <style> /* 解决element-ui的table表格控件表头与内容列不对齐问题 */ .el-table th.gutter{ display: table-cell!important; } </style> 这样就大功告成啦！！！！！！对齐啦！！！ ...

vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

10-16

总之，通过监听表格的滚动事件、获取可视宽度以及使用适当的CSS样式，我们可以实现Vue中滚动表格的表头与列的对齐，即使列的宽度各不相同。这个解决方案允许我们创建用户友好的滚动表格，提供良好的阅读体验。如果你...

5 条评论您还未登录，请先登录后发表或查看评论

Eelement 中表头无法对齐解决办法

越陌度阡

05-13

751

Eelement的表格有时候会遇到下面这种情况，表头对不齐，让页面看起来有一些瑕疵。解决办法是在App.vue里加上如下代码： <style> .el-table th.gutter { display: table-cell !important; } </style> ......

el-table设置表格表头和内容的对齐方式及样式

ysw716的博客

01-23

1313

el-table设置表格表头和内容的对齐方式及样式

elementUI el-table中的对齐问题

c6088的专栏

03-01

1399

el-table中输入列，有验证规则的列和无验证规则的列的对齐问题

elementUI表格组件表头不对齐

weixin_40716682的博客

11-20

143

添加CSS样式 .el-table th.gutter{ display: table-cell!important; }

vue解决el-table表格中表头与内容错位问题

qq_59224836的博客

07-07

2808

解决当el-table里的内容比较多的时候以及el-table表格列固定左右滑动导致的表头与内容错位问题，直接在请求数据后执行表格自带属性doLayout方法重新加载table即可完美解决。

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

IT业的爬虫的博客

07-15

344

element-ui的table表格控件表头与内容列不对齐问题解决方法：将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！） body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell...

ant-design-vue a-table 表头固定后和内容不对齐的问题

热门推荐

ZTJ_123的博客

08-08

1万+

ant-design-vue a-table 表头固定后和内容不对齐的问题前言padding， border 和 margin固定内容列的宽度完整的columns和HTML内容(不太完整，没敢全放)笔记问题前言最近在项目中使用ant-design-vue，在做表格的时候需要固定表头，但是发现列对不齐，相信使用过的同学都遇到过这个问题。网上各种查找，还是找不到解决办法，在这里强调一下，官方文档...

Element - table表格控件表头和内容列不对齐的问题

HVENLY的博客

05-28

3309

今日在使用Element开发时，发现了一个奇怪的问题，就是table控件中表头和内容列不对齐的问题，如下图所示：需要解决这个问题非常简单，只需要全局样式中加上如下代码即可： .el-table th.gutter{ display: table-cell!important; } ...

解决Antd Table组件表头不对齐的问题

01-18

在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动但是在添加了该属性之后，经常会出现表头不对齐的问题：针对该问题Google 了一下解决方案，但大多不是很完善，为...

基于ElementUI table组件修改，数据化表格结构，添加实用功能，快速生成表格.zip

01-05

ElementUI是一款流行的前端UI框架，尤其在Vue.js项目中被广泛应用。它的table组件是一个强大的工具，用于展示数据化的表格结构。本教程将深入探讨如何基于ElementUI的table组件进行定制，添加实用功能，并快速生成...

vue+element-ui动态生成多级表头的方法

10-18

标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...

ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间

yangshuquan的专栏

07-24

796

在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。

Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空

FangX_u的博客

07-24

581

采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。

Windows10+vs 2017中创建WEB API教程

Explinks的博客

07-24

987

本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。

TS如何处理js模块的类型？

闻人放歌的三寸青草园圃

07-24

271

【代码】TS如何处理js模块的类型？

苍穹外卖浏览器前端界面修改

最新发布

程序员象漂亮的博客

07-25

226

客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。

vue2elementui的表格固定第一列，其他的表头跟表格内容根据返回的数据渲染

06-07

可以使用 ElementUI 的表格组件中的 fixed 属性来实现固定表头和固定列。具体操作步骤如下： 1. 在表格组件中添加 fixed 属性，设置为 left 或 right，即可固定左侧或右侧的列。例如，要固定第一列，可以将 fixed 属性设置为 left。 2. 在表头和表格内容中分别指定列的宽度，以保证表格的对齐和显示效果。可以使用 ElementUI 的 column 组件中的 width 属性来设置列的宽度。 3. 根据返回的数据动态生成表头和表格内容。可以使用 ElementUI 的 table 组件中的 :columns 和 :data 属性来实现。示例代码如下： ``` <template> <el-table :data="tableData" :columns="tableColumns" style="width: 100%"> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Tom', age: 18, address: 'New York' }, { name: 'Jack', age: 22, address: 'London' }, { name: 'Lucy', age: 20, address: 'Tokyo' } ], tableColumns: [ { prop: 'name', label: 'Name', width: '100px', fixed: 'left' }, { prop: 'age', label: 'Age', width: '100px' }, { prop: 'address', label: 'Address', width: '200px' } ] } } } </script> ``` 在上面的示例中，我们将第一列（Name）固定在左侧，并设置了列的宽度和对齐方式。同时，根据返回的数据动态生成了表格内容和表头。