VUE学习（八） elementUI 动态表头添加fixed后样式异常

最新推荐文章于 2024-07-23 15:23:30 发布

两个娃他爹

最新推荐文章于 2024-07-23 15:23:30 发布

阅读量2.7k

点赞数

分类专栏： vue 文章标签： fixed样式混乱 table样式乱

本文链接：https://blog.csdn.net/n009ww/article/details/103158771

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

表头使用的是动态表头，将第一列锁定以后，发现出现下面的情况，很是郁闷，数据中无辜多了一个横线。

找了相关资料，解决方案是每次渲染时都为该列头动态添加key。

<el-table-column prop="name" label="机构"  :width="nameWidth" fixed :key="randomKey"></el-table-column>

然后是动态改变key

 activated() {
    this.randomKey=new Date().getMilliseconds();
   
  },

问题解决！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

两个娃他爹

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+elementUI renderHeader函数实现表格头部hover出现图片

xiubinxu的博客

03-10

1175

效果图：上代码： // 表头数据格式 export const columnsList= [ { key: 'vcAcct', title: '产品代码', align: 'center', fixed: 'left', minWidth: '200', sortable: 'custom' }, { key: 'vcAcctName', title: '产品名称', align: 'center', fixed: 'left', minWidth: '120', sortable: '' },

el-table 最后一列数据设置 fixed=“right“以后表头背景色跟自定义的样式不统一的问题

huangqian__的博客

06-22

1216

如果你使用了这样的方式修改了全局el-table表头的样式并且最后一列设置了 fixed=“right” ，设置了这个属性的表头与其他列背景色或者其他样式出现不同的情况。给所有的el-table加上这条属性，然后style里定义你的类名，这样整个表头就统一样式了。然后把整个类名全在全局里，方便统一修改。

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

el-table 添加fixed属性以后，设置好的样式，不生效的问题。

weixin_46531845的博客

03-23

3728

3月23日周三 1.el-table 添加fixed属性以后，设置好的样式，不生效的问题。 table表头，样式错位相关css代码，之前 el-table__header-wrapper 。添加固定属性fixed以后，就多了一个.el-table__fixed-header-wrapper 属性，所以对el-table__fixed-header-wrappe 重新填加样式即可。 .el-table__header-wrapper , .el-table__fixed-header-wrappe

Element-ui el-table 表格 fixed 固定导致表格滚动窜行错位的解决方法

最新发布

qq_42101569的博客

07-23

726

el- table 对表格列项设置fixed 左右固定列的时候,移动滚动条到页面底部会出现表头和内容错位或者是固定列的内容错位的情况。

vue element ui 使用el-table 组件的时候，列使用fixed，表格滚动后出现错位

weixin_42539372的博客

04-17

8319

表格滚动之后fixed列和其他列出现如下错位的情况在网上找了很多办法，doLayout也不起作用，给column设置：key="index+Math.random()"也不起作用,然后就用监听滚动条的方法写了： this.dom = this.$refs.multipleTable.bodyWrapper console.log(this.dom) this.dom.addEven...

自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题

beretHat_5的博客

03-25

2128

问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。

Ant Design Vue表格组件添加fixed:left属性之后标题的底色消失问题解决

m0_52449484的博客

10-08

306

解决Ant design vue Table组件添加列固定属性fixed:left之后标题的底色消失的问题

Vue3+ElementUi el-table简单封装

柒柒兮的博客

08-03

2189

前言：一次简单的封装，还不够完善，主要是根据自己的需求封装的。。。直接贴代码！第一步 vTable.vue <template> <el-table v-loading="config.loading" header-row-style="48px" height='580' border :class="{ 'table': '', 'noScrol': config.tableText }" ref="multipleTable"

VUE-006-el-table拖拽表头页面显示异常（二）

weixin_39568072的博客

12-21

814

el-table拖拽表格宽度导致页面异常 <el-table-column fixed="right"> 情景2：问题列fixed="right" 此时拖拽最后一列宽度，导致页面异常，如下：解决办法1：最后一列 el-table-column不要设置width，如下：解决办法2：倒数第二列加属性 :resizable="false"，如下：这样设置后，最后一列尺寸就不可以被改变了。 ...

vue 二次封装ElementUI table表格组件

q1ngqingsky的博客

12-07

3889

el-table表格封装 formatter：这个属性在列中如果使用插槽就会失效，所以我设置了两个列，如果有render方法说明单元格要内嵌代码，就是用特殊列，反之就是正常列，所以formatter和render不能同时使用 ...

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

10-15

总之，处理ElementUI的`el_table`固定列问题，特别是涉及到切换tab后出现的样式异常，需要深入理解CSS选择器和Vue的组件样式隔离机制。通过正确的选择器和优先级设置，我们可以有效地修复这些视觉上的瑕疵，确保用户...

vue中使用element table，fixed错行问题

m0_56209375的博客

04-11

1119

把你的el-table每一行的宽度进行设置

解决element动态表头操作栏fixed导致表格错位问题

yuryS的博客

11-13

379

element表格fixed错位

Vue table组件动态设置高度，列设置fixed导致的错行问题，滚动条利用鼠标横向滚动

qq_43657722的博客

01-30

2995

Vue table组件动态设置高度，列设置fixed导致的错行问题，滚动条利用鼠标横向滚动

elementui表格添加fixed之后样式异常

weixin_55553106的博客

06-30

1170

最近写项目碰到一个bug 大概就是一个表格组件两个页面都会使用组件中表格的某些列就用v-if控制了表格的首尾列都用了fixed 然后就发生了bug 如下图具体原因不明看过很多网上的办法有在fixed的列绑定key的也有使用doLayout()的测了都没用最后在一个前端交流群里一位大佬给出的办法实测有效 .el-table__header, .el-table__body, .el-table__footer { width: 100%; tab

Element-ui的table中使用fixed后出现行混乱情况

qq_35629054的博客

11-24

3056

最近项目比较忙，很久没有更新博客了，今天就来贴一下下午使用elementui遇到的问题 1、话不多说，先看看问题是什么我们看到table左侧fixed的区域并没有延伸到表格底部，之前在用户拖拽表格时添加了方法this.$refs.headGroupTable.doLayout()来重置表格（headGroupTable是自定义组件名称，学过vue的都懂），但是在数据拿到后使用此方法并不能解决以上问题 2、解决方法其实解决方法也很简单，我们打开浏览器看到fiexed的表格区域样式的高度是固定的px，这是

vue element ui 使用el-table 组件的时候，列使用fixed之后表格会出现错乱的情况

热门推荐

qq_40809206的博客

01-03

1万+

是使用fixed 属性之后，fixed 列和其他列出现错位的情况，流体高度和左右列固定同时使用的时候滑动到最底部翻页才出现这种问题，Google 和 Firefox正常，win10自带的浏览器和360浏览器会出现错位的情况，应该是scrollTop在fixed列没生效，找了很多方法doLayout也不起作用，然后就自己写了 this.$nextTick( ()=> { th...

vue+element——父级元素fixed，遮罩会在上方

a12b345c6789的博客

06-27

820

前言　　这种场景还是蛮场景的　　一个共用的head组件，组件里面通常是当前系统登录账号名退出登录修改密码这样的弹框　　但是现在我又想head不跟着main内容上下滑动。所以用了fixed 定位。　　问题来了，head组件的下拉菜单修改密码弹框的遮罩在上方了，该如何解决呢？需求　　element的弹框的遮罩在上方，弹框的遮罩Z-index 是自增长的，所...

elementUI Table 自定义表头动态数据及插槽

xuelong的博客

10-24

5652

项目需求是高度自定义列表界面，表格的表头由后端返回，并且用户可以自定义。而且需要根据用户自定义的表头，数据显示不同的样式。比如有些字段是标签，有些字段是id需要根据数据字典查询对应的name。

vue elementui card表头根据后台传回数据动态更新

08-31

在Vue中使用Element UI的Card组件，可以通过数据绑定的方式将表头动态更新。首先，在data属性中定义一个变量来存储后台传回的数据，比如称为headerList。然后，在Card的头部插槽中使用v-for指令遍历headerList数组，动态生成表头。最后，通过后台接口获取到数据后，将数据赋值给headerList变量，即可实现动态更新。具体实现步骤如下： 1. 在data中定义headerList变量： ``` data() { return { headerList: [] // 存储表头数据 } } ``` 2. 在Card的头部插槽中使用v-for遍历headerList数组： ``` <el-card> <div slot="header"> <div v-for="header in headerList" :key="header.id">{{ header.name }}</div> </div>  </el-card> ``` 3. 在获取到后台数据后，将数据赋值给headerList变量： ``` methods: { fetchData() { // 发起后台请求获取数据 // 假设通过axios发送请求，请求成功后将数据赋值给headerList axios.get('/api/header').then(response => { this.headerList = response.data; // 将后台返回的数据赋值给headerList }).catch(error => { console.error(error); }); } }, mounted() { this.fetchData(); // 在组件挂载完成后调用fetchData方法，获取并更新表头数据 } ``` 通过以上步骤，即可实现根据后台传回的数据动态更新Card组件的表头。在获取到数据后，调用fetchData方法获取并更新表头数据，从而实现动态更新。