使用element ui el-table toggleRowSelection 中 for 循环和 foreach的坑

最新推荐文章于 2025-03-21 14:34:40 发布
最新推荐文章于 2025-03-21 14:34:40 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue el-table foreach vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42785995/article/details/116025742
版权
在使用ElementUI的el-table组件时，若要实现默认选中行的效果，需要注意使用foreach而非for循环进行设置。原因是toggleRowSelection方法会修改集合的内存地址，而for循环在遍历时无法直接修改集合本身。因此，使用foreach可以确保修改到的是集合中每一项的内存地址，从而实现正确的默认选中行操作。

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

--------------------------------------------------------------------

在使用element ui  el-table toggleRowSelection   中 要想默认填充， 必须要使用 foreach循环 设置， 而不能使用for 循环来循环设置

toggleRowSelection   应该是会修改内存地址

当需要修改集合，由于foreach时获取的是每一项的值，该值为只读，而不是集合中每一项所在的内存地址，所以无法修改

 

所以需要使用foreach

第十七篇 VUE ElementUI开发之数组对象的匹配问题以及对应的简单开发例子
Yzt_199626的博客
06-09 1474
前言：在实际开发当中，有时会涉及到数组对象的匹配问题--即一个对象数组中是否与另外一个数组的某个属性一致，一致的话做 xxx 操作。 下面给个简单的例子： arrayData
vue+elementUI查询出数据并在页面中用v-for遍历
YECHANG1450的博客
02-22 3242
vue+elementUI查询出数据并在页面中用v-for遍历 先看一个foreach循环 for(item:items){ //foreach循环 //遍历items数组中的元素 console.log(item); } v-for就很类似于foreach循环 在data()的return中新建items数组 然后把查到的数据赋值给items 在{{item.userName}}中item是每个元素, userName是每条json数据中的key :key="item.id"是因为需要给一个不可
获取项目中elementui用到的组件,按需导入
u014446094的博客
06-16 560
读取项目内elementui标签
vue el-table 设置selection选中状态
Aa12364567的博客
03-21 740
toggleRowSelection 方法vue el-table 设置selection选中状态。
Element UI 一键校验多表单（v-for循环表单，异步校验规则，v-for 中的 ref 属性，避坑 forEach 不支持异步 await ）
朝阳39的博客
06-14 1247
所以此例多表单的校验需改用 for 循环，通过 break 还可提前跳出 for 循环。通常，若两个元素 ref 属性相同，通过 this.$refs 只能获取到最终的元素。但在 v-for 中的 ref ，通过 this.$refs 得到的是一个数组。此处的接口是公共的免费接口，仅模拟效果，不必深究传参和返回。forEach 只支持同步，不支持异步。所以，此例中，获取第一个表单的方法是。
el-table使用forEach将时间戳转换成YYYY-mm-dd
qq_43628847的博客
05-18 652
新建一个js文件 export default { dateFormat(date, fmt = 'YYYY-mm-dd') { if(date == null){ return '' } if('number' == typeof date || 'string' == typeof date){ date = new Date(date * 1) } let ret; const opt = { "Y+": da
element ui el-table进行二次封装
weixin_54423679的博客
06-23 1899
element ui table 二次封装
Element UI 中 el-table el-table-column 实现密码的睁眼闭眼
qq_40173750的博客
08-19 2363
el-table-column 实现密码的睁眼闭眼
Element-ui--el-tablez中的 @selection-change 【获取复选框集合】
CC酱写前端的博客
02-16 2867
真实项目数据格式：接口数据如下真实展示， 加载角色列表的选中项（根据后台返回的id），以及用户点击选中的项处理 <template> <el-scrollbar class="scrolbar-wrapper"> <el-table ref="table" :data="apiObj" @select="(selection,row)=>{selectionChange(selection,row)}" // select
[功能优化] 解决element ui el-table 固定列在多级表头时宽度无法动态变更
weixin_45776447的博客
10-10 2164
解决element ui el-table 固定列在多级表头时宽度无法动态变更
element-ui el-table中根据按钮的多少来计算操作栏的宽度以及根据显示按钮的数量动态计算是否需要展示更多
qq_37899792的博客
01-23 965
【代码】element-ui el-table中根据按钮的多少来计算操作栏的宽度。
使用el-table组件时,对字段进行forEach循环:famatter时不生效
qq_39691676的博客
09-28 681
formatte不能使用forEach Func(row, column, cellValue, index) { const arr = this.regQueryPatternOptions for (let i = 0; i < arr.length; i++) { if (cellValue === arr[i].sdValue) { return arr[i].sdName } } },
el-table toggleRowSelection多选表格，切换不同数据修改多行选中状态
weixin_43457519的博客
07-20 6082
el-table toggleRowSelection多选表格，切换不同数据修改多行选中状态
vue项目（创建）中引入elementUI组件（小白篇）
NancyFyn的博客
08-12 314
1、VUE项目创建 -安装 node 官网：https://nodejs.org/en/ -查看node、npm版本号 输入命令： **node -v** npm -v同理； -全局安装脚手架：vue-cli 输入命令：npm install --g vue-cli -初始化项目 ：vue init 输入命令： vue init 运行项目： npm run dev ,弹出访问地址，运行成功。 2、引入 elementUI 组件 -安装 elementUI npm i element
elementUI表格树动态合并列问题处理
CuiCui_web的博客
09-10 2858
此篇为第一版，写法有问题，最终版请查看https://blog.csdn.net/CuiCui_web/article/details/103767614 首先看一下效果图，根据评估人来进行合并（有相同内容的列都可以通过这种方式进行合并列） <el-table :data="tableData" ref="tableDialog" ...
Element ui表单循环验证
你喜欢大熊猫嘛
01-17 601
Element ui表单循环验证，单循环验证
element-ui一些常用组件的二次封装
qq_53089988的博客
03-15 5336
组件封装 创建components文件夹，并且创建封装组件 1.Table——表格封装 <template> <div> <el-table :data="tableData" style="width: 100%" :stripe="stripe" :border="border" :size="size" v-loading="loading" @selection-change="handleSelectionChang.
ElementUI的toggleRowSelection方法时好时坏
weixin_45535408的博客
11-25 730
试过用$nextTick()，但是没效果，还是会出现异常。问题：对应行没有已勾选样式，但是实际上已经勾选上了。在后面接上两行代码，结构跟重新渲染虚拟DOM。
element-ui 循环表单，根据不同的条件，添加动态表单校验功能
qq_36437172的博客
07-12 3874
需求：根据用户的选择的运输方式，动态改变输入框的输入条件，并且整个表单是可以循环添加多项，实现对数据批量校验。 效果图如下： 首先，表单可以新增加，则是一个循环表单；给 el-form-item 加上 prop 属性，对每一组中的这一项都进行校验。 <div v-for="(k,index) in formData.lists"> <template> <el-form-item label="运输方式" :prop="'list
element-ui el-table 一对多
最新发布
04-26
### 实现 Element UI 中 `el-table` 组件的一对多关系展示 在实际项目中，经常需要使用 `el-table` 展示一对多的关系数据。这种场景下，可以通过嵌套子表格或者展开行的方式来实现。 #### 方法一：嵌套子表格 可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值