elementui表格删除
时间: 2023-09-03 19:10:47 浏览: 42
要删除 ElementUI 表格中的一行,需要在表格组件的配置项中设置 `row-key` 属性,指定表格数据中每一行唯一标识符的属性名。
接下来,在删除操作中,可以通过传入要删除行的唯一标识符,使用 `Array.prototype.findIndex()` 方法找到该行在表格数据中的索引,然后使用 `Array.prototype.splice()` 方法将该行从表格数据中删除。
以下是一个示例删除操作的代码:
```javascript
<template>
<el-table :data="tableData" :row-key="row => row.id">
<!-- 表格列配置 -->
<!-- ... -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 }
]
};
},
methods: {
handleDelete(id) {
const index = this.tableData.findIndex(row => row.id === id);
if (index !== -1) {
this.tableData.splice(index, 1);
}
}
}
};
</script>
```
以上代码中,`handleDelete()` 方法接收一个 `id` 参数,表示要删除的行的唯一标识符。在方法中,使用 `Array.prototype.findIndex()` 方法找到该行在表格数据中的索引,如果找到了,则使用 `Array.prototype.splice()` 方法将该行从表格数据中删除。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)