多个el-table表格勾选的数据,添加到一个数组里面
时间: 2024-09-13 20:03:49 浏览: 49
在ECharts的`el-table`组件中,如果你想要实现多个表格数据的勾选,并将它们添加到一个统一的数组中,你可以这样做:
首先,在`el-table`上设置`selection-mode`属性,如`multiple`,这样可以支持多选。然后,你可以监听`@row-click`事件,当用户点击行时,你可以检查当前行是否被选中,并将其对应的原始数据添加到数组中。
示例代码如下:
```html
<template>
<el-table
:data="tableData"
:selection-key="''" // 使用空字符串作为唯一标识
selection-mode="multiple"
@row-click="handleRowClick">
<!-- ... 表格列配置 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 初始化你的表格数据
selectedItems: [] // 存放选中的数据
};
},
methods: {
handleRowClick(row) {
if (row.$checked) { // 检查行是否被勾选
this.selectedItems.push(row); // 将选中的数据添加到数组
} else {
const index = this.selectedItems.findIndex(item => item === row);
if (index !== -1) {
this.selectedItems.splice(index, 1); // 如果取消选中,则从数组中移除
}
}
}
}
};
</script>
```
在这个例子中,`selectedItems`数组会存储所有被勾选的`el-table`行的原始数据。每当用户对表格行的操作发生改变时,`handleRowClick`方法会被触发并更新这个数组。
阅读全文