element-ui 使用table current-change这个方法时 选择表格报错

最新推荐文章于 2024-07-23 20:27:20 发布
最新推荐文章于 2024-07-23 20:27:20 发布
阅读量4.2k 收藏 4
点赞数 3
分类专栏： vue-admin-element 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pengboran/article/details/109381444
版权

先看下报错
在这里插入图片描述
在这里插入图片描述
子组件 获取父组件的数据 来渲染表格 表格数据是动态的 在子组件用watch 深度监听 来实时渲染
排查了半天 找不到报错原因 看了 代码逻辑 没有问题，然后检查current-change这个方法 查资料
在这里插入图片描述
看到这个 于是 在表格加了一个属性
在这里插入图片描述
报错问题 解决 …
真实不可预测的后果

前端cv大师
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
新手小白记录elementUI tree组件对节点增删改
ismmc的博客
09-23 602
效果： 对tree组件封装成treeComponent 组件，内容如下，从项目中选取 <el-tree ref="tree" v-loading="loading" :data="treeData" v-bind="treeProps" :show-checkbox="showCheckbox" @check="onCheck" @current-change="onCurrentChange" &gt..
Element-UI快速入门
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
Element el-table的@current-change事件在切换分页的时候，获取到的currentRow为null
qq_37471721的博客
08-08 2万+
今天项目中遇到一个棘手的问题，想要实现的功能如下图 如果要获取到当前选中行的内容，首先要使用el-table的@current-change事件，事件中的currentRow参数即选中内容 问题现象 项目中出现的问题现象是，在第一页切换每一行都正常，右侧详细内容也能显示。但当选中某一行，点击分页的时候，就会报错。 报错原因： 经过问题排查，发现当切换分页，触发了el-pagination的@...
vue3 vxe-table 点击行，不显示选中状态，加上设置isCurrent: true就可以设置选中行的状态。
花花鱼的专栏
07-23 669
vxe-table 点击行，不显示选中状态，加上设置isCurrent: true就可以设置选中行的状态。
关于el-table的current-change
weixin_44707050的博客
02-07 7275
<el-table ref="settingTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" > <el-table-column type='index' label="序号" align='center'> </el-table-column> </el-table&...
vue-cli-element-ui-table-表格分页功能切换数据后@current-change失效的解决方案
郝峰vip的博客
12-11 2515
前沿 最近在开发过程中，遇到了切换了表格中的数据后，分页的功能失效，current-change方法失效，折腾了好久，最后终于解决了，记录下来，方便后续学习，也发现形成一个思维的问题，不能老是闷头敲代码，要多交流。好了，不废话了，切入正题。 解 决方案就是销毁分页组件在重建这样就会完全重新渲染了分页组件。 这里采用的是v-if的重建解决方案 <div class='pagi...
el-upload组件使用current-change方法报TypeError Cannot create property ‘uid‘
lFFFFFFl的博客
07-27 1229
el-upload组件使用current-change方法报TypeError Cannot create property ‘uid‘
使用element-ui table expand展开行实现手风琴效果
10-17
Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细信息。 首先，手风琴效果是指在一个表格中，当一个行被展开时，其他所有已展开的行会自动...
【Vue+Element-UI】Table表格：动态Table
  ╭じò ぴé╮。Qi
04-22 3451
对Element-UI官方Table表格进行二次封装。实现动态Table，Table表头定制化展示。并且可全局使用该组件，方便后期维护。
Vue+element-ui 实现表格的分页功能示例
10-18
通过这个示例，我们了解到了Vue和element-ui中表格和分页组件的基本使用方法。对于开发者来说，掌握这些组件的用法可以快速构建出交互丰富且用户体验良好的数据展示界面。需要注意的是，虽然这里展示的是静态数据，...
利用vue和element-ui设置表格内容分页的实例
08-27
在上面的代码中，我们定义了一个 `current_change` 方法，该方法将在页数改变时被调用。在这个方法中，我们更新了 `currentPage` 属性的值，以便在下一个生命周期中获取正确的数据。 加载数据 在实际开发中，我们...
使用el-table过程中current-change事件获取当前选中行数据，用于修改框数据出现数据联动
qq_41975388的博客
04-29 2067
问题： 使用el-tree的node-click事件获取选中节点的信息，之后将 节点信息渲染到右侧table表格中，使用el-table的current-change事件获得当前所选中行的数据，然后将数据赋值给修改框的数据源，在修改框中修改数据时出现el-tree，el-table数据同时更改的情况，数据传递使用this指向data中的数据 原因： 使用 = 将一个对象赋值给另一个对象，因为js对象为引用型，赋值就是改变对象地址指向，所以造成了修改一个数据另外数据也变动的情况 解决： a = Ob
elementui 的 table组件需添加row-key,否则会导致预测不到后果，比如触发@current-change
zhumengzj的博客
07-02 1万+
table需添加row-key，否则如果重新请求列表，会默认触发@current-change等等方法，因为重新渲染列表，current-change发生了改变，冲原本选择的row，变成不在选择任何一行，导致问题很难排查
elementUI table选中后改变背景色
tour9566的博客
05-23 8558
<el-table ref="singleTable" :data="tableData" highlight-current-row :row-style="rowClass" :row-class-name="tableRowClassName" ...
element UI 分页器current-page强制改变不触发current-change解决
Fmili的博客
04-15 1382
问题描述： 点击查询按钮正常显示，切换到第二页，再点击查询按钮，数据正常显示，但页码高亮显示仍在第二页。 网上查了很多，也尝试了，都没解决 。。。。。 可用解决方案： 查询数据的方法增加一个参数，点查询按钮的时候传参数，点分页器的时候，调用该方法不传参数，根据是否有参数，更改current-pape,再手动调用current-change方法。 按钮 <el-button type='primary' size='small' @click="findList(1)">查询</el-b
elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)
树上骑个猴的博客
12-23 7104
思路：后端分页导致每一页之间的勾选状态都是独立的，我们需要新建一个数组来保存这些被勾选数据的id，当切换到某个页码时，从数组中进行比对，如果当前页码有待勾选的id，则用代码让当前页码的数据勾选起来。 注意： 不要使用row-key 和 reserve-selection 。否则导致自己管理的勾选状态与el-table自身保存的勾选状态互相冲突，导致状态难以管理。我们的目的是，表格的勾选状态均由代码来控制 提示： 本文代码仅包含关键代码，用于提供思路，无法直接运行使用。 第一步: 给el-table添加.
element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug
11-19 3358
最近在开发中遇到一个element-ui分页的一个小bug，具体场景如下 1、首先点击正常分页来到第二页数据正常展示 2、点击搜索，需求为回到第一页按条件搜索，此时也正常展示 3、再次点击分页去第二页，此时分页还停留在第一页，current-change事件不触发 原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页，但有可能element内部的页码数据未改变，因此当在此点击第二页的时候相当于页码未发生改变，current-change..
element plus table 单选行背景颜色设置
qq_44871531的博客
02-01 742
element plus table 单选行背景颜色设置
el-table handleCurrentChange有时候会失效
hello world
01-13 2241
介绍 在使用el-table选中行的时候，有时候会出现没有选择到数据的情况。原因是我这里用的是多选表格，但是只绑定了current-change事件 @current-change="handleCurrentChange" 这样的话就会导致一个问题：当我点击这行数据没问题，但是当我选中前面的方框来选中这行数据，就会无法获取到数据。 解决方法是： 绑定selection-change事件 @selection-change="handleSelectionChange"> 更多 如果需
element-ui的table跨页多选
最新发布
08-10
Element UI 的 Table 组件默认支持分页功能，如果你想实现在跨页情况下进行多选，可以结合其提供的`selection`属性和自定义事件处理。`selection`属性允许你在表格上设置单选或多选模式，你可以通过监听`@selection-change`事件来跟踪用户的选中状态，不论是在哪一页。 以下是实现步骤： 1. 在 Vue 中配置 `element-ui` 的 Table，设置 `selection` 为 `multiple` 或 `row-key` 来保证行级选择（如果你需要基于每个条目的唯一标识符进行多选）： ```html <el-table :data="tableData" selection="multiple"> <!-- 表格列 --> </el-table> ``` 2. 在组件内获取和处理选择的数据： ```javascript export default { data() { return { tableData: [], // 假设这是你的数据源 selectedItems: [] // 存储选中的行 }; }, methods: { handleSelectionChange(val) { this.selectedItems = val; // 当用户切换选择时，更新selectedItems } }, watch: { $refs: { handler(newRef, oldRef) { if (newRef && newRef.$el) { newRef.$el.addEventListener('selection-change', this.handleSelectionChange); } else if (oldRef) { oldRef.$el.removeEventListener('selection-change', this.handleSelectionChange); } }, deep: true } } } ``` 3. 如果有分页，你需要额外处理每页的数据同步： ```javascript // 假设你有一个分页器 component，如 el-pagination this.pagination.currentPage.value = 1; // 刷新到第一页 this.getTableData(page => { // 获取当前页数据并更新表格及选择 // 更新selectedItems为你在新数据中的选择 }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值