el-table自定义合并单元格后，单元格错乱的问题

最新推荐文章于 2024-05-24 14:31:01 发布
最新推荐文章于 2024-05-24 14:31:01 发布
阅读量4.9k 收藏 6
点赞数 1
分类专栏： 笔记 文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34958326/article/details/109717254
版权

使用element时，当表格需要使用合计行时，可以使用show-summary属性使用element自带的合计行功能，但是当除了有合计行之外还有另一个类似合计行的时候，element自带的显然没法实现，

此时就需要自定义合计行的功能

如样式：

 

 

 

 

在el-table中:data绑定固定两行的空数据，用来显示合计行和价税统计行

然后自定义合并单元格的方法

此时会存在单元格错乱的问题

如图

 

解决办法，根据element官网介绍需要添加return【0,0】 用来删除合并后的在前的单元格样式

之后问题解决

 

 

记录学习日常
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
weixin_33511258的博客
01-13 1068
将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 )通过计算文字的宽度进行表头设置，其他内容无法计算。5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。尽量使用v-if，不然有些情况下会计算错误。Vue.directive("tableFit", {//指令所在组件的 VNode 及其子 VNode 全部更新后调用。componentUpdated...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
Sunny_lxm的博客
04-11 1205
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
自定义合并el-table单元格，单元格错乱问题
qq_42488203的博客
03-09 1603
接口返回的需要在表格中展示的数据。单元格的顺序发生错乱。
el-table 行合并及合并后序号错位处理
最新发布
co2021的博客
05-24 324
2.数据处理记录合并行。
element的el-table合并，处理合并产生的hover样式问题
migexiaoliang的博客
08-17 3862
有时候列表页需要合并单元格展示，这时候element自带的hover效果没有全选中，如下图所示：但是最终的实现效果是：点击单元格显示合并后的所有行。
element table 合并单元格错位或单元格后移问题处理方法
热门推荐
一只小蚂蚁的自白
04-08 1万+
使用element table中span-method 进行合并单元格存在一个API中未说明的原则（有示例） 1.合并单元格时占用那个单元格，那么原来的单元格渲染必须清除，否则会将该行数据在该占位单元格位置后移一位； 操作方法是{rowspan: 0, colspan: 0} 示例： objectSpanMethod({ row, column, rowIndex, columnInde...
element表格合并错位的BUG
yiyueqinghui的博客
07-08 7088
原因：被合并的单元格未隐藏，才引起后方单元格错位， 隐藏单元格方法：{ rowspan: 0, colspan: 0 }; 代码如下 <template> <div id="cell_merge"> <el-table :data="tableData" :span-method="objectSpanMethod" ...
el-table使用type=“expand“、fixed表中表内容显示错位
hua_ban_yu的博客
06-23 3468
在使用elementUI的表格时，发现同时使用type="expand"表中表和fiexd列锁定这两个功能时，表中表部分内容会直接显示在最外层表格上面，拖动表格滚动条时也无法隐藏。如图 查了很多资料，网上说的this.$refs.planTableRef.doLayout()无法解决问题，为了解决这个问题，最终想到一个比较合理的解决方案......
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
总之，通过结合使用`el-table`的`:span-method`属性和自定义方法，我们可以灵活地控制表格单元格的合并，以实现上下两行相同数据的合并展示。这个特性使得Element-UI的表格组件在复杂数据展示场景中更加实用。
el-table合并单元格计算
12-28
el-table合并单元格计算
关于element组件table合并单元格数据偏移问题
qq_39188726的博客
07-06 2444
关于element组件table合并单元格数据偏移问题
el-table合计行第一次无法显示的问题
Komorebi_00的博客
12-15 599
表格固定了高度，合计行的显示，时有时无，很不稳定。首次调用接口时列表合计行未显示，缩放页面或者切换页签二次调用接口时又出现。
el-table表格错行问题处理
lee_uncle的博客
05-06 668
el-table 表格错行问题处理
el-table切换时，由于固定某一列或者el-table切换表格造成表格内行错位的解决方法
Aa12364567的博客
11-21 1103
el-table切换时，由于固定某一列或者el-table切换表格造成表格内行错位的解决方法。在表格内容发生变化处添加下面的代码。
Element UI table el-table 表格合并行 合并的行数不一样
RosaChampagne的博客
07-26 824
Element UI table el-table 表格合并行
学习记录：el-table合并单元格（动态增删改）
Blood97的博客
01-22 1403
注：可能代码不是那么优雅，但是能跑就行，简单记录一下，不要要求那么严格~~项目需要做一个评分表，涉及到单元格合并，就简单记录一下。该函数可以返回一个包含两个元素的数组，第一个元素代表。方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行。Element UI Table 表格。也可以返回一个键名为。
el-table动态合并单元格
09-02
在el-table中合并单元格可以通过自定义插槽(slot)和自定义方法来实现。以下是一种实现方法： 在el-table中，通过v-for循环遍历每一行数据，然后通过v-if条件判断来决定是否需要合并单元格。 首先，需要为每一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值