vue elementui项目 el-table勾选复选框获取列表当前行数据 el-table收集列表中被选中复选框数据信息

⭐先看案例，想要点击勾选el-table的复选框后获取那一行的id或者name或者其他字段都是可以的举一反三。包括我已经把勾选后的数据重新展示在页面上了。下面为主要步骤。

 ⭐第一步： 渲染完表格 给表格加上事件 @selection-change="handleSelectionChange"

⭐第二步：在methods 中打印获取当前所勾选的列表行数据啦console.log(this.$refs.multipleTable.selection);

//或者第二种方法

    handleSelectionChange(e) {
      // console.log(e)
      // 打印出来的数据 就是勾选获取的勾选那一行的数据
      //  console.log(this.$refs.multipleTable.selection);
      /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的yilist这个数组了
      this.yilist = e.map((item) => item.id);
      // 现在yilist 这个数组 就是由我勾选每一行的id组成的数组了 这个数组里全是勾选那行的id
      console.log(this.yilist, 777);
    },

⭐ 关于ref:vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。本文对ref不做过多的解释。感兴趣的同学们可以深入了解一下哈~

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

⭐全部完整代码如下

 ⭐我还把获取到的数据通过map方法遍历出id组成新的数组yilist:[ ]。(当然也可以举一反三遍历其他的字段)

温馨提示如果以上方法尝试过了，问题还没解决的朋友，如果您不嫌弃，欢迎评论或者私信联系，我会第一时间与您取得联系，和您一起探讨解决问题！绝不收取任何咨询费用！

关键词搜索优化（与文章无关）：
el-table勾选复选框如何获取列表当前行id，如何勾选获取表格当前行的index,name，如何勾选获取表格当前行的数据，VUE获取element组件中table表格的id,element中table单元格获取id，elementUI表格如何获取当前选择的id? 【ElementUI】获取表格选中行的id数组，element中获取选中行元素的IDel-table收集列表中被选中复选框数据信息