一、vue+element ui 中勾选复选框获取列表当前行数据

最新推荐文章于 2024-05-22 17:04:38 发布

With_Sunflower

最新推荐文章于 2024-05-22 17:04:38 发布

阅读量3k

点赞数 3

分类专栏：各种各样的项目问题文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/With_Sunflower/article/details/124985944

版权

本文介绍了在Vue+Element UI项目中如何通过ref属性获取勾选复选框的列表当前行数据。文章详细讲解了使用ref给列表打标识的方法，并在methods中通过this.$refs获取选中行数据的步骤。最后分享了作者的学习心得，提倡深入挖掘遇到的问题以提升技能。

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

Hello ~ 欢迎来到刘有钱的前端小窝 ❤

前言

非科班硕自学前端，在项目里遇到了太多太多问题，想记录一下。
有些是解决不了的bug，有些是实现不了的功能。
我不想再踢飞这些前端路上的绊脚石了，将它们打磨成鹅卵石然后收藏起来，等到以后遇到相同的问题可以回头来看看，或者，只是做个留念也很不错鸭 ❤

一、vue+element ui 中勾选复选框获取列表当前行数据

1.首先用 标签属性 ref 给整个列表打标识，就是给它取个名啦

⭐官网对 ref 的解释：
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是
DOM 元素；如果用在子组件上，引用就指向组件实例。

🌰一个栗子
打标识：<xxx标签 ref=“lyq”>…</xxx标签>
获取：this.$refs.lyq

		<!-- 列表 -->
        <el-table
            stripe
            class="tableBox"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"

最低0.47元/天解锁文章