Vue的EL-element中的el-table中el-table-column错列问题

最新推荐文章于 2024-07-26 14:03:04 发布
最新推荐文章于 2024-07-26 14:03:04 发布
阅读量1.1k 收藏
点赞数
分类专栏： Vue的EL-element中的el-table中el-table-c 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_STY/article/details/119644814
版权
本文探讨了Vue中el-table组件在动态生成表头并切换不同布局时出现的错列问题。问题根源在于v-for循环生成的el-table-column在切换list时产生了相同的key值，导致样式错乱。解决方法是确保每次切换时为每个表头分配唯一的key，以避免样式继承。
摘要由CSDN通过智能技术生成

Vue的el-table的el-table-column当你动态的去生成表头的时候,两种不同的表头来回切换时,某个给固定宽,会出现错列的问题,原因是v-for动态生成el-table-column时,两个不同的list切换会产生相同的key值,所以导致会出现来切换时使用上个list表头的大小,所以会出现错列问题.

在这里插入图片描述

小小石大眼睛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
el-table 表格数据list 行转列Demo
qq_35030421的博客
12-06 1695
<template> <div> <el-table :data="tableData" size="small" row-class-name="row" cell-class-name="column" :highlight-current-row="true" fit > .
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
然后在`<el-table-column>`中，通过`v-for`循环匹配`positionList`和`positionKey`的键，获取对应的宽度： ```html <el-table-column v-for="(item, index) in positionList" :key="index" :prop="item.prop" :...
改变el-table宽度
12-12
vue+element 设置页面表格，el-table拉动每列的宽度，并保存到localStorage里
el-table-column动态列切换时，样式错位问题(自收藏)
Aquarius09的博客
06-08 401
版权声明：本文为CSDN博主「一个敲代码不秃头的俗人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_41580802/article/details/129593077。1、html代码中添加 el-table-coloum中使用 :key="Math.random()"；在动态新增、删除el-table-column列时，会出现表格样式错位的问题。2、如果用v-show请切换成v-if；
在el-table中控制每一列的显示隐藏
最新发布
F2601775592的博客
07-26 211
使用template标签包裹，v-for 写在template 上，v-if 绑定在需要循环的元素之上即可。使用v-for和v-if同时使用就会报错。
Vue -el-table表格动态控制表头动态展示数据（控制每一列展示）
路虽远行则将至，事虽难做则必成。
04-23 7602
最近在实际开发中我们遇到一个需求是用户自己控制键值来生成对应表格数据。换个思路就是我们还是正常查询数据，需要一个开关页面来动态改变表格展示每一列。我们需要一个开关页面，里面有多选，确定重置取消，确定时把选中数据传递给父组件，动态数据for循环最好是以封装成组件的形式，可以使代码减少，别的地方也可以用。组件全局注册直接用（主页文章有）
vue+element-ui中的el-table-column配合v-if导致列展示数据出错
艾丽的博客
01-05 902
<!-- 当是 我的上传 的时候才展示 --> <el-table-column v-if="showFormal" prop="dictAuditStatus" label="审核状态" align="center" width="120px"> <template slot-scope="scope"> <statusLabel :status_label="scope.row.dictAuditStatus.toString() | auditFi..
vue2项目中引入Element UI 后 el-table的表头和表头样式错位解决办法
weixin_45832746的博客
02-22 283
这样可以让序号随着翻页而改变。
Element-UI el-table-column 使用slot插槽 v-if 报错
weixin_34087503的博客
02-20 7534
报错信息[Vue warn]: Error in render: "TypeError: u.$scopedSlots.default is not a function"复制代码原因是因为表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，通过key去标识一下当前行是唯一的，不许复用，就行了。在其和其之后的一个显示的组件上添加 :key...
Vue自定义时间过滤器处理表格时间显示异常的问题
听闻如故的博客
07-25 829
在使用vue table组件进行数据渲染的时候通常会遇到关于时间的数据显示异常的问题，原因通常在于后端接口给我们返回的时间数据格式不一致所导致，所以需要我们来自定义一个关于时间处理的过滤器来处理这个问题 在main.js中定义如下内容 //时间过滤器 Vue.filter('dateFormat',function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear()
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
Vue.js作为一款流行的前端框架，提供了丰富的组件库，如Element UI，它包含了一个名为`el-table`的数据表格组件。本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到...
vue el-table实现自定义表头
10-15
综上所述，通过Scoped Slot结合el-table和el-table-column组件，可以灵活地为Vue应用中的Element UI表格实现各种自定义表头需求。这样不仅可以提供更好的用户体验，还可以满足复杂业务逻辑的实现。需要注意的是，...
el-table 动态添加表头数据，进行动态字段添加问题的解决办法
beichen3997的博客
07-12 6215
在el-table 中动态添加表头字段时有时候会出现表头跟下面的数据对应不上的情况，这是因为在element中el-table的底层原理中， 表头时一个table，中间数据为一个table，el-table一共创建了2个table,他们呢之间时通过index进行一一对应的，要想解决需要在 el-table-column的标签添加唯一标识符key 表示一一对应 <el-table-co...
如何解决el-table中动态添加固定列时出现的行错位
runepic的博客
12-07 2073
在使用el-table组件时，我们有时需要根据用户的操作动态地添加或删除一些固定列，例如操作列或选择列。但是，当我们使用v-if指令来控制固定列的显示或隐藏时，可能会出现表格的行错位的问题，即固定列和非固定列的行高度不一致，导致表格的布局混乱。其中，针对本文添加dom触发bug的条件，有效的方法是使用doLayout方法，该方法可以在表格的数据或列发生变化时，对表格的dom进行重新渲染，更新表格的布局。
vue项目中el-table-column的值是list的话遍历
qq_43193513的博客
08-31 725
【代码】vue项目中el-table-column的值是list的话遍历。
el-table-column遍历list的方法
Xenogenesis__的博客
05-25 2982
el-table-column遍历list的方法 数据形式是这样的： <el-table :data="cartList" stripe style="width: 100%"> <el-table-column label="商品名称" align="center" min-width="100%"> &lt
vue的列表el-table-column展示时间，2018-05-19T08:04:52.000 0000时间展示格式修改成yyyy-MM-dd hh:mm:ss
qq_29881229的博客
09-30 809
1、导入包： import * as fecha from “element-ui/lib/utils/date”; 2.加formatter <el-table-column prop＝"creattime" labe＝"创建时间" :formatter＝"dateTimeFormatter" /> 3.在methods加上下面方法 //列表日期时间格式化 dateFormat(row, column, cellValue) { return cellVa.
vue - element 中 el-table自定义弹窗
06-06
在 Vue-Element 中，要自定义 el-table 的弹窗，你可以使用 scoped slot 的方式来实现。 具体步骤如下： 1. 在 el-table 中定义 scoped slot，例如： ```html <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> <el-table-column prop="actions" label="Actions"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)">Edit</el-button> <el-button @click="handleDelete(scope.row)">Delete</el-button> </template> </el-table-column> </el-table> ``` 2. 在 methods 中定义 handleClick 方法，例如： ```javascript methods: { handleClick(row) { this.dialogVisible = true; this.editRow = row; } } ``` 3. 在 el-dialog 中使用 editRow 数据来渲染自定义的弹窗： ```html <el-dialog :visible.sync="dialogVisible"> <el-form :model="editRow"> <el-form-item label="Name"> <el-input v-model="editRow.name"></el-input> </el-form-item> <el-form-item label="Gender"> <el-radio-group v-model="editRow.gender"> <el-radio :label="1">Male</el-radio> <el-radio :label="2">Female</el-radio> </el-radio-group> </el-form-item> </el-form> </el-dialog> ``` 这样，当用户点击 Edit 按钮时，就会弹出自定义的编辑弹窗，用户可以在弹窗中编辑数据，点击确认按钮后，数据会保存到 editRow 中，然后再自动更新到表格中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小石大眼睛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值