el-table 获取选中元素,根据下标删除
在Vue.js中使用Element UI的el-table
组件时,你可以通过ref
属性为表格设置引用,然后使用this.$refs
来访问表格实例的方法和属性,包括选中的行。
以下是一个简单的例子,展示了如何获取el-table
的选中元素并根据下标删除行:
<template>
<el-table
:data="tableData"
ref="multipleTable"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 其他列 -->
</el-table>
<el-button @click="deleteSelectedRows">删除选中行</el-button>
</template>
<script>
export default {
data() {
return {
tableData: [{ /* 数据对象 */ }, { /* 数据对象 */ }]
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
deleteSelectedRows() {
const selectedRows = this.multipleSelection;
if (selectedRows.length === 0) {
this.$message.warning('请至少选择一项进行操作!');
return;
}
selectedRows.forEach(row => {
const index = this.tableData.indexOf(row);
if (index !== -1) {
this.tableData.splice(index, 1); // 根据下标删除
}
});
this.$message.success('删除成功');
this.$refs.multipleTable.clearSelection(); // 清除选中状态
}
}
};
</script>
在这个例子中,我们定义了一个表格el-table
和一个删除按钮。表格使用ref="multipleTable"
来标识,并且定义了一个selection-change
事件处理函数handleSelectionChange
来获取选中的行并保存到multipleSelection
变量中。删除按钮绑定了一个点击事件deleteSelectedRows
,当按钮被点击时,会执行删除操作。
删除函数中,我们首先检查是否有选中的行,如果没有,则给出警告。如果有,则遍历所有选中的行,通过tableData.indexOf(row)
找到这些行在数组中的下标,然后使用splice
方法根据下标删除这些行。最后,我们清除了选中状态并给出成功消息。
评论已关闭