el-table-column 由于加了if判断 切换标签页时表头顺序不一致

最新推荐文章于 2024-09-18 17:46:17 发布
最新推荐文章于 2024-09-18 17:46:17 发布
阅读量557 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/su_zhen_hua/article/details/114818417
版权
在Vue项目中，遇到el-table-column使用条件判断时，切换标签页会导致表头顺序出现问题。解决方法是在el-table-column上添加key属性，确保每次渲染的唯一性，从而修复表头顺序不一致的bug。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



解决前

切换标签页后 表头顺序与原来的顺序不一致
在这里插入图片描述



解决后

在这里插入图片描述



解决办法

加 key

<el-table-column
  v-if
最低0.47元/天 解锁文章
【vue+elementUI】表格列展示顺序错乱
栀妹儿的炼丹炉
10-16 4311
element-ui 中的 el-table表格 el-table-column列展示排序不是代码顺序，刷新顺序改变（排序错乱） 解决 利用 key=“1” 代码 <el-table show-overflow-tooltip="true" :data="tableData" tooltip-effect="dark" v-loading="tableLoading" :header-cell-style="{background:'#EFF3F8',colo
【ElementUI】table标签下的el-table-column内容无法显示
jinliping334的博客
12-13 5251
【ElementUI】table标签下的el-table-column内容无法显示出现的问题解决方法 出现的问题 代码 <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size
el-table中动态加载数据表头错位问题
A_Liyulong的博客
09-18 683
解决效果：能够达到表头不错位的效果，但是由于一般用于公共组件，你无法确定下一组输入的表头和数据，是否也是这种标识码的情况不可能完全定义所有的列宽，所以排除。当el-table作为公共组件进行使用是，如果发现由于table-body数据过长导致表头错位的，检查数据是否为单词，需要进行单独的换行设置。2.可以看到首行的名称是有换行的效果，标识码没有换行，应该可以确定是标识码的。可以看到返回结果code都是sting，但是我查阅资料发现code在表格中被定义为单词，所以需要进行样式调整。
el-table 表头错乱问题解决
weixin_43522687的博客
06-29 1992
开发项目时，使用 el-table 建立表格，由于数据是动态展示的，表头中使用了 v-if 进行判断，偶尔情况下发现会有表头错乱的问题。 解决方案：为每个 v-if 的 el-table-column 添加 key 进行绑定 <el-table-column v-if="col.coupon_amount" prop="couponAmount" width="125" key="couponAmount" > ... </el-table-column
element表格头乱序？试试这种方法
希望看完文章的你能够带着答案离开。
11-16 2310
element表格头乱序？试试这种方法
vue+elementui项目中使用el-table在el-table-column上使用v-if的时候乱序和样式错乱的问题
my466879168的博客
07-10 4902
样式错乱的问题 项目的需求是点击不同的按钮在一个表格上进行不同数据的展示，当使用v-if切换的时候，写在后面的列竟然跑到了前面显示 解决方法 在需要使用v-if渲染的el-table-column元素上加上一个不重复的key值即可解决问题 <el-table-column v-if="status ===3" :key="Math.random()">是否在线</el-table-column> <el-table-column v-if="type !=3" :key="Ma
实现el-table-column列宽根据内容自适应且无数据时自动撑开表头
megamind0430的博客
04-23 5769
使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn，具体操作方法： 通过继承实现el-table-column列宽根据内容自适应 大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。 1.表格没有任何变化，但是表格里面的数据内容超出了边.
关于el-form+el-table+表头部分内容和表单都是动态生成（动态绑定v-model）
qq_56366747的博客
03-10 2162
根据需求写的表单+表格，由于后端给的格式不适应表格数据格式，做了很多转换，最后提交的数据也做了格式转换。
el-table-column 顺序
最新发布
03-13
在使用 Element UI 的 `el-table` 组件时，可以通过定义 `<el-table-column>` 标签的顺序来控制列的显示顺序。HTML 或 Vue 模板中的元素排列决定了最终渲染到页面上的顺序。 如果需要动态调整列的顺序，则可以利用 ...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
11-20
现象： 解决方法 ： 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处
el-table-column用if判断改变顺序解决办法
weixin_51179995的博客
12-15 3363
原因: <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字2" align="center" prop="本列参名" /> &.
elementui的表格在使用v-if之后列的顺序错乱问题
weixin_42349568的博客
02-27 2150
一，原因 出现错乱的条件有两个 1、el-table-column的template中使用 slot-scope=“scope” 2、el-table-column中使用 v-if="…" 二，解决办法 给每个列增加一个独一无二的key就可以了 > </el-table-column> <el-table-column prop="item_subtotal"
el-table-column使用v-if导致位置错乱
濮家大少
11-17 1791
在使用tab切换时，使用的是同一个表格组件，切换状态时要重新请求数据，然后要根据不同的状态展示不同的列，使用v-if做判断，在切换时，发现本该隐藏的列没有隐藏，而且位置还发生错乱了！ 会错乱的写法： <el-table-column v-if="isTab1">受理日期</el-table-column> <el-table-column v-if="isTab2">生效日期</el-table-column> 解决方法： 每一列都添加一个具有唯一值的 ke
解决：element表格列添加v-if判断，列的顺序错乱！
EasyChillの博客
09-21 2698
出现错乱的条件有两个 1、el-table-column的template中使用 slot-scope=“scope” 2、el-table-column中使用 v-if="…" 解决： 给 每一个 el-table-column 加一个key值，用数字的方式给key赋值 例如
el-table-column 使用v-if显示错乱问题
a72039的博客
02-01 3805
是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。解决方法：在el-table-column标签上加 key值。
el-table-column动态列切换时，样式错位问题(自收藏)
Aquarius09的博客
06-08 477
版权声明：本文为优快云博主「一个敲代码不秃头的俗人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/qq_41580802/article/details/129593077。1、html代码中添加 el-table-coloum中使用 :key="Math.random()"；在动态新增、删除el-table-column列时，会出现表格样式错位的问题。2、如果用v-show请切换成v-if；
vue使用element ui 表格el-table-column里面做判断
maowencai的博客
09-21 9630
vue使用element ui 表格el-table-column里面做判断
el-tablecolumn : v-if列表顺序被打乱解决
qq_45061461的博客
07-04 1920
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值