⭐先看案例，想要点击勾选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收集列表中被选中复选框数据信息
