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

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

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

   <el-table 
      ref="multipleTable" 
      :data="tableDataInfo" 
      tooltip-effect="dark" 
      style="width: 100%" 
      @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="85">
        </el-table-column>
        <el-table-column prop="number" label="订单编号" width="220">
        </el-table-column>
        <el-table-column prop="type" label="产品类型" width="220">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220">
        </el-table-column>
        <el-table-column prop="expirationTime" label="到期时间" width="220">
        </el-table-column>
        <el-table-column prop="paymentAmount" label="支付金额" width="220">
        </el-table-column>
      </el-table>

⭐第二步：在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 元素；如果用在子组件上，引用就指向组件实例。

⭐全部完整代码如下

<template>
  <div class="main">
    <!-- 小标题 -->
    <div class="maintitle">
      <div class="titlehengxian"></div>
      <div class="titletext">我的订单</div>
    </div>
    <div class="mytable">
      <div class="" style="width:100%;font-size: 18px;margin-bottom: 20px;margin-top: 20px;">
        勾选的id展示：{{yilist}}
      </div>
      <el-table 
      ref="multipleTable" 
      :data="tableDataInfo" 
      tooltip-effect="dark" 
      style="width: 100%" 
      @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="85">
        </el-table-column>
        <el-table-column prop="number" label="订单编号" width="220">
        </el-table-column>
        <el-table-column prop="type" label="产品类型" width="220">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220">
        </el-table-column>
        <el-table-column prop="expirationTime" label="到期时间" width="220">
        </el-table-column>
        <el-table-column prop="paymentAmount" label="支付金额" width="220">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { searchOrder } from "@/api/person/invoice";
export default {
  components: {},
  data() {
    return {
      // 表格数据
      tableDataInfo: [],
      //自己定义的新数组
      yilist: [],
      // 表格数据
      searchForm: {
        pageNum: 0,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getInfoList();
    },
    handleSelectionChange() {
      //打印出来的数据 就是勾选获取的勾选那一行的数据
      console.log(this.$refs.multipleTable.selection);
      /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的yilist这个数组了
      this.yilist = this.$refs.multipleTable.selection.map((item) => item.id);
      // 现在yilist 这个数组 就是由我勾选每一行的id组成的数组了 这个数组里全是勾选那行的id
      console.log(this.yilist, 777);
    },
    /* 表格列表 */
    async getInfoList() {
      const result = await searchOrder(this.searchForm);
      if (result.code === 200) {
        const data = result.data;
        console.log(data);
        this.tableDataInfo = data.list;
        this.total = data.total;
      }
    },
  },
};
</script>
<style scoped>
</style>

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

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

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