el-table 合计行除fixed部分不显示

最新推荐文章于 2023-12-18 16:02:07 发布
最新推荐文章于 2023-12-18 16:02:07 发布
阅读量342 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Soul_1998/article/details/121997422
版权

问题描述

昨天遇到一个非常奇怪bug 在修改一个页面样式时，合计行除fixed部分外都不显示 最后是这样解决

 updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },

调用Vue的updated函数 在其中对el-table 进行重新布局

热风s
关注
el-table 合计并放表格最上方
mianweiqinan的博客
03-22 1281
写样式，控制该合计行在最上方，不写默认在最下方 /*这里是：table的合计*/ .el-table{ display: flex; flex-direction: column; } /* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */ .el-table__body-wrapper { order: 1; } /* 如果你的"价格1或者日期加了fixed,那你需要加上这俩行代码，但是加了以后，这俩行可能会影响到其他页面，所以合计页面
vue2 | el-table在合计行里做cell合并
weixin_51722468的博客
02-21 482
研究了一下el-table的排列，发现他的表头、表格、合计行分别是header、body、footer，合并方法只针对body。因为我用了fixed固定左边几列，饿了么的机制是画了一个新表格直接盖在上面（我猜的），所以刚才改到的是下面的表格。理论上来说element都给封装完了，但是他的合计和合并是两个分开的属性，没办法在合计里面做合并。还是有点怪，毕竟是修改已经封装好的东西，加点耐心再改改样式。直接用原生来修改表格的colspan。肯定有什么秘密是我还没发现的。打印一下元素，确实修改了。
element ui 表格动态列显示空白bug 修复方法
10-18
今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table 合计部分展示问题
zz18256889177的博客
04-09 363
只需要在summary-method方法体里面添加上 this.$nextTick(() => { this.$refs.table.doLayout() }) 让table重新计算布局
el-table使用fixed后，最后一行显示不全；el-table设置fixed后，最后一行被遮挡。
i_am_a_div的博客
12-14 1万+
解决el-table使用fixed后显示不全问题
element-ui中el-table使用fixed=“right“时固定列左边框消失问题
xiaobaige6084的博客
07-11 1586
element-ui中el-table使用fixed="right"时，横向滚动条滚到最右，固定列左边框不显示，加上如下css样式即可解决。
el-table 选择列合计，fixed固定某列，合计行放在表格上方，设计合计行样式
金乌的博客
11-25 3917
选择特定的几列进行合计，并将el-table的合计行放在表格上方，并修改合计行样式。关键代码：show-summary :summary-method="getSummaries" ；不写summary-method方法，默认计算所有数字列
el-table 表格新增一行合计
m0_72275927的博客
12-18 1411
根据产品需求要求计算出当前页面的总合计金额和点击复选框显示复选框里的计算金额。1.自己搭建的页面结构。
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
baidu_41682543的博客
03-14 1256
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
Vue使用ElementUI的el-table组件，处理合计行问题
热门推荐
小张写bug的博客
04-15 1万+
目录标题一、合计行，在需要的时候调用显示1.1 问题和现象1.2 解决方案二、合计行不显示2.1 问题和现象2.2 解决方案 一、合计行，在需要的时候调用显示 ElementUI在使用el-table做合计行时，官方文档说明如下： 参考地址：https://element.eleme.cn/#/zh-CN/component/table 将show-summary设置为true就会在表格尾部展示...
element -ui el-table 合计 处理
qq_37672347的博客
09-25 605
参考链接：https://www.cnblogs.com/lisaShare/p/10885133.html
element中table设置多级表头并固定制定列，解决固定列不显示内容
m0_52263688的博客
04-23 4114
需注意给多级表头和需要固定的列每一列都加上fixed属性，并且子表头列的宽度设置总和需要大于等于父级表头，既可以解决。
el-table设置fixed固定列后，对表底合计行进行样式改变不生效问题（mix-blend-mode；z-index）
weixin_45926180的博客
06-19 1832
通过设置 :header-cell-style="tableHeaderColor" :cell-style="CellStyle" 内容颜色区分实现了，但是合计行还是默认样式的。提高层级后，发现前两个单元格的‘合计’、‘-’字样也被背景颜色覆盖掉了，可能是层级过高的原因，但是给z-index层级进行减小，通过移除其中一列的fixed属性，被移除属性的单元格背景颜色也发生了改变，确定是。图中表格是使用了el-table进行设计的，因为横向内容过多进行了固定列的设置，给月份和公司列添加了。
记录el-table合计行的使用
weixin_72905398的博客
03-08 1518
项目中需要为表格添加自定义合计行，定义某些数据不需要计算。
Element Ui 表格固定列，出现底部和右侧空白的问题
我是一个酒鬼的博客
05-12 4330
Element Ui 表格固定列，出现底部和右侧空白的问题
关于el-tabs里面嵌套el-table,合计行不显示问题
m0_56856837的博客
09-14 1429
今天我在用Vue2+element-ui写项目的时候，需要在el-tabs的子项里面嵌套一个el-table.本来是没有什么问题的，今天老板要求加上合计行的时候出现了问题，我发现合计行不显示，但是检查元素的时候el-table下面是有一个类名为el-table-foot这个dom元素的，这个合计行时而出现，时而消失，很奇怪。试了很多方法也没有解决，最后才想起了一个Vue的Api，nextTick，结合el-table的doLayout方法解决了。
【vue+element】解决合计行不显示，除页面缩放或者F12，合计行的实现及解决横向滚动列在合计行上方；
花椒和蕊的博客
04-28 1908
早上刚遇到这个问题，弹窗选完数据后，在页面的table表格中展示选好的内容，并且要有合计行 结果发现合计行不展示，但是我按F12或上下拖动页面，合计行就出来了 原因在于页面刚渲染的时候表格是空的，页面渲染在数据接收前。页面缩放会再次渲染，因为才会在拖动的时候才能看见合计行，刚渲染好的时候看不到。 解决方案很简单，通过v-if判断数据源数组的长度，当有长度的时候代表数据已经渲染，表格不是空的。 有这两个就可以实现合计行了 <el-table ref="standTa
element-plus el-table 显示不全或者不显示
仰望星空的博客
08-25 3532
解决element-plus el-table 显示不全或者不显示
解决Element-UI el-table show-summary合计行不显示问题
tonetwo的博客
02-07 5577
解决Element-UI el-table show-summary合计行不显示问题
el-table合计行文字居中
最新发布
04-30
在Element UI的el-table中，要实现合计行文字居中，可以通过自定义表格的slot来实现。具体步骤如下： 1. 首先，在el-table组件中添加一个slot，用于自定义合计行的内容： ```html <el-table :data="tableData" style="width: 100%"> <!-- 表格列配置 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 自定义合计行 --> <template slot="footer"> <tr> <td style="text-align: center;">合计</td> <td style="text-align: center;">{{ getTotalAge() }}</td> </tr> </template> </el-table> ``` 2. 在自定义的合计行中，使用`style`属性设置`text-align: center;`来使文字居中对齐。 3. 在Vue实例中，定义一个方法`getTotalAge()`来计算合计行的值。 ```javascript data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 } ] }; }, methods: { getTotalAge() { let total = 0; for (let i = 0; i < this.tableData.length; i++) { total += this.tableData[i].age; } return total; } } ``` 这样就可以实现el-table合计行文字居中的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值