el-table-column 合并列，切换表格显示，数据错乱问题

最新推荐文章于 2024-08-09 11:14:56 发布
最新推荐文章于 2024-08-09 11:14:56 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： vue 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41277748/article/details/131964640
版权
在同一个页面使用两个el-table时，由于缺少唯一标识导致切换时表格列错乱。文章提到，这是由于Vue的diff算法未能正确识别两个表格的区别。解决方案是在每个el-table上添加独特的key值，以确保每个表格在DOM中具有唯一标识，从而避免列错乱的问题。
摘要由CSDN通过智能技术生成

由于同一个页面需要通过lable进行切换显示不同的表格结果在切换的时候发现表格列错乱了

正常是这样的

 

切换错乱的是这样的  序号没有了，已接单协同总数列也不见了

切换回来发现第一个表格 原先的两列被后面的挤压了

 

 

 

 代码也没啥毛病，最主要的原因是因为同一个页面有两个el-table，无法区分连个表格，这要保证表格唯一性，不然在解析dom树的时候就会觉得你你没有变的就改，只改变变的地方，diff算法问题，所有想要区分这两个表格是不一样的，就得加一个key，key的值不同，就可以区别是两个不同的dom树，所以只要在el-table 上加key="XXX",就不会出现错乱问题了

 

 

井底的蜗牛
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
自定义合并el-table单元格，单元格错乱问题
qq_42488203的博客
03-09 1663
接口返回的需要在表格中展示的数据。单元格的顺序发生错乱。
解决element表格动态添加列后内容错乱
AKA多个A的博客
09-05 513
当我们用element表格动态添加列或内容后可能会出现这种表格内容错乱的情况,element里面也出了相应的解决方法doLayout()方法。然后在查询的时候加上aoLayout方法即可。给table标签加上ref属性。
el-table-column字段格式化转换，formatter属性使用
最新发布
东坡居士的博客
08-09 627
el-table-column formatter属性格式化内容
通过v-if动态设置Element表格列时，出现表格列显示错乱、表头闪动等问题
你的阿迁
06-14 2813
在生命周期函数beforeUpdate中调用表格的 doLayout() 方法 （尽量加上可选链，不然可能存在获取不到table实例，造成doLayout为undefined的情况）在实际开发， 我们经常会通过v-if控制表格列的显隐，来实现不同条件下展示不同的表格列，这时候就可能会出现表格列显示错乱、以及表头闪动等问题。由于key值不会被及时的更新，在显示或者隐藏列时，部分DOM会被继续复用，不会重新渲染，导致列显示错乱。由于列的显示或者隐藏，导致了重排以及重绘，表格发生闪动。
el-table合并表头，导出表头，数据错乱的问题
m0_51113907的博客
12-12 897
表头合并，导出数据重复，导出表头错乱问题的解决
el-table合并列&同时在分页时不被割裂开
未来以来 futureToday
08-04 821
核心思想 合并大表格，留出空间给到slot 插槽，在插槽内使用小表格； 效果图 具体实现 <template> <div> <el-table show-header :cell-style="set_cell_style" :data="tableData" border :cell-class-name="cellClassName" :span-method="arraySpanMeth
element表格合并错位的BUG
yiyueqinghui的博客
07-08 7183
原因：被合并的单元格未隐藏，才引起后方单元格错位， 隐藏单元格方法：{ rowspan: 0, colspan: 0 }; 代码如下 <template> <div id="cell_merge"> <el-table :data="tableData" :span-method="objectSpanMethod" ...
el-tabel样式混乱
fhrlhh的博客
07-09 266
首先来看小可爱反馈的bug截图 点击下一页的时候,页面单元格开始混乱,因为页面有合并单元格,所以我首先怀疑了合并单元格的问题, 不过很快就排除了,之后我把问题定位到了key上.如上可以看到代码里面,表格绑定了row-key,定位到这个函数,发现return的是row.number ,这个number 代表的是表格第一列的需要,是1-10 , 第二页也如此,所以铁定是会重复的,于是改成了下面这样,问题解决.......
elementUI中table多选切换时，之前选的数据丢失如何解决,Error in callback for watcher “data“: “Error: [ElTable] prop row-k
weixin_42248417的博客
02-24 2487
elementUI中table多选切换时，之前选的数据丢失如何解决,Error in callback for watcher "data": "Error: [ElTable] prop row-k
el-table动态合并表格出现错乱问题记录
m0_71266141的博客
03-21 763
【代码】el-table动态合并表格出现错乱问题记录。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
<el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop" :sortable="col.sortable" :show="col.show"></el-table-column> </el-table> <el-dialog title="选择列" ...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table 根据某列数据，合单元格&&序号错乱处理，表尾合计
Judylly的博客
02-15 944
el-table根据某个字段合并单元格，解决序号错乱，表尾合并
记录一次合并单元格表格渲染错位问题。
南漂一枚
11-02 456
el-table重置渲染
解决element的tabel抖动以及v-if切换时候数据不对的问题
kebi99的博客
08-19 755
在开发中，使用element的 tabel时候，需求是需要根据不同的类型显示不同的表（有共同的表头），所有就是使用了v-if去判断el-table-column每一项的显示隐藏，结果却发现了数据渲染的错误问题；（数据来源都是一样 的），如图 切换的表头时候，，数据展示错误了； 解决办法：给每个el-table-column项添加唯一的key值，让他渲染显示拥有唯一的key值，因为vue在重新渲染，相同的dom会复用，所以导致了每一项的列还是之前的。 ...
el-table合并单元格序号列顺序
09-08
el-table是Element UI框架中的一个表格组件，用于展示数据。合并单元格指的是将相邻的单元格合并成一个单元格，使得表格更加整洁和简洁。 要合并单元格序号列的顺序，我们可以通过自定义表头和表格的slot来实现。首先，在表头中定义序号列，然后在表格的slot中定义每行的序号单元格。具体步骤如下： 1. 在表头中定义序号列，可以使用el-table-column组件，并设置其type为index，这样就会自动生成序号列。同时，设置其width属性为固定的宽度，以确保序号列宽度一致。 2. 在表格的slot中定义每行的序号单元格，可以通过template模板来实现。在template中使用scope属性来获取当前行的索引，并将索引加1作为序号显示出来。 3. 在template中，使用v-if判断当前行是否是第一行，如果是第一行则合并单元格，否则不合并单元格。可以通过scope属性获取当前行的索引，然后判断是否等于0来确定是否是第一行。 通过以上步骤，我们可以实现el-table合并单元格序号列的顺序。在表格中，序号列会根据数据的行数自动增长，并且在每一行的序号单元格中会显示对应的序号。通过合并单元格，可以让表格更加整洁和美观，提升用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值