vue3 element plus怎么删除table中某行数据
时间: 2024-03-18 20:38:53 浏览: 109
要删除表格中的某行数据,您需要先获取到该行的索引,然后使用splice()方法从表格的数据源中删除该行。以下是一个示例代码:
```
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column label="Operation">
<template #default="{row}">
<el-button type="danger" size="mini" @click="handleDelete(row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
tableData: [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 22 },
{ name: 'Bob', age: 25 },
],
});
const handleDelete = (row) => {
const index = state.tableData.indexOf(row);
state.tableData.splice(index, 1);
};
return {
state,
handleDelete,
};
},
};
</script>
```
在上面的代码中,我们使用了一个按钮来触发删除操作,按钮绑定了一个handleDelete方法,该方法接收一个参数row,表示当前要删除的行数据。在handleDelete方法中,我们使用indexOf()方法获取到该行在表格数据源中的索引,然后使用splice()方法从数据源中删除该行。
阅读全文