Vue 使用element-ui时 el-table表格无法对齐问题

最新推荐文章于 2024-07-18 16:01:47 发布
原创 最新推荐文章于 2024-07-18 16:01:47 发布 · 3.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css

本文解决了在使用Element UI框架时遇到的表格布局显示不正确的问题。通过在App根组件的style中添加特定的CSS样式，成功调整了表格单元格的显示方式，实现了预期的布局效果。

遇到的问题
在这里插入图片描述
解决办法
在App根组件style中填入对应的样式

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

在这里插入图片描述

问题完美解决

Element-UI - 解决el-table中图片悬浮被遮挡问题
觉醒法师的专栏
06-16 1936
在开发中，发现element-ui在el-table中添加图片悬浮显示时，会被单元格遮挡的问题。通过查询得到的解决办法，大多是修改.el-table类中相关样式属性，但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难，将悬浮图片放在body节点下，通过定位显示即可。所以对于此问题，将通过Vue.directive钩子函数，自定义弹框来实现。
elemnt-ui table表格线对不齐
TheSpiritIsHeart的博客
01-13 301
在app.vue文件中添加 body .el-table th.gutter { display: table-cell !important; }
el-table 全屏时，控制台从右边设为独立出来时，表格最右侧的固定列的行会对不齐解决
我爱美女S的博客
10-20 931
el-table 全屏时，控制台从右边设为独立出来时，表格最右侧的固定列的行会对不齐解决
Element-UI组件之el-form标签右对齐，label-position不生效
qq_30716265的博客
10-25 8688
el-form标签右对齐，label-position不生效
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
m0_51041905的博客
12-20 3141
1.问题概述 当表格数据太多，会出现纵向滚动条，把滚动条拉到最右侧时，会出现表头与内容不能对齐的现象 2.解决方法 1.当页面数据加载完毕后，在后面加上 this.$nextTick(() => { this.$refs.table.doLayout(); }) doLayout是element提供的方法，它的作用是对Table进行重新布局。 2.别忘了给表格加上ref属性 <el-table ref="table"></el-table> 然后就大
pc端在使用element-ui中的table表格时出现表格对不齐，解决方法
weixin_45561885的博客
08-26 897
1、用element-ui中的table表格时出现表格对不齐 解决方案： body.el-tableth.gutter{ display:table-cell!important } 然后就ok了
vue+element-ui动态生成多级表头的方法
10-18
在描述中提到的“vue+element”方法，主要涉及到Vue.js框架和Element-UI库的结合使用，特别是Element-UI中的`el-table`组件，这个组件支持自定义列、排序、筛选等功能，非常适合构建复杂的表格布局。 动态生成多级...
Vue+element-ui 实现表格的分页功能示例
10-18
在本示例中，我们关注的是如何使用Vue和element-ui来实现表格的分页功能。具体而言，分页是数据展示中非常常见的需求，允许用户通过分页控件切换当前页面的数据，从而在有限的显示空间内查看更多的数据项。在element...
element-ui表格列金额显示两位小数的方法
10-18
对于Element-UI的表格，我们可以在`el-table-column`的`slot-scope`内使用`scope`对象来访问当前行的数据。例如，如果`payPrice`字段是以分表示的，我们可以这样处理： ```html <el-table-column prop="payPrice" ...
精选资源
使用element-ui table expand展开行实现手风琴效果
01-21
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常...
el-table固定列显示问题-固定列高度与表格高度不一致
梁白开的博客
12-12 2258
设置固定列，即表示在原表格的基础上渲染出新的fixedtable来展示固定列，这两个table一定程度上是重合的，fixedtable在原table上，fixedtable 通过 只渲染 我们选为 固定列的 列。原table与fixedtable高度问题，由下图可知原table高度为630px，两个固定列fixedtable高度为612px，从而导致了高度不一致问题。在使用el-table过程中，设置了左右两个固定列，由于未指定表格高度，故而导致以下问题。固定列表尾高度与表格高度不一致问题。
Element的el-table-column设置为fixed=“right“时的高度不正确问题
最新发布
weixin_47673008的博客
07-18 1466
vue2+element-ui，我们一般针对el-table-column设置fixed="right"来固定展示按钮列。
vue 多张表拼接，对齐问题
happygrillcx的专栏
11-29 605
如果是多张表拼接的话，由于不是同一张表，html里就算列拼接好了，但是打印模式也会有问题，列对不齐 解决办法，如果列使用固定长度则需要配置整个表的 固定宽度属性，即table-layout: fixed；宽度 width100%；依然要设置，这个是针对表格的，不然的列配置宽度是不起作用的。 <table border="1" style="table-layout:...
elementUI 表格某列 左对齐失效，改变某个特定单元格对齐方式
Karen_Kiss的博客
08-03 1703
用单独的 align 改变某列对齐方式 会标红 ，用不了， 不知道为什么？官方文档明明就是用 align。改成Align 就好了，奇怪。
elementUI的el-table表格不生效问题
evennight的博客
01-29 390
我之前下载的elementUI依赖是用的镜像cnpm，删掉原来的依赖重新下npm的依赖npm i element-ui -S，重启前台服务就可以了。
表单元素对齐问题解决方案使用vertical-align:middle
weixin_34249367的博客
05-13 452
为什么80%的码农都做不了架构师？>>> ...
记录el-table操作fixed后高度不一致问题（已解决）
鹤渺的星球
06-17 5502
引用el-table，然后将右侧的操作按钮列，fixed在右侧结果效果图里面右侧操作列高度和其他列高度不一致（已解决）
解决 element ui表格最右侧定位 滚动发生错位
m0_63464623的博客
06-03 300
【代码】解决 element ui表格最右侧定位 滚动发生错位。
element table 左对齐
weixin_42206375的博客
04-20 3688
尝试了 fixed=“left” header-align=“left” :header-cell-style="{‘text-align’:‘left’}" 都是没有效果 然而，align="right"放在对应的上就可以右对齐，但是align="left"显示的还是在中间 最后找到了一个 <el-table v-loading="table_loading" :data="tableData" row-key="id"
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值