el-table怎么写一个方法删除里面的数据
时间: 2024-03-09 07:49:14 浏览: 80
el-table树形表格表单验证(列表生成序号)
如果你使用的是 Element UI 的表格组件 `el-table`,你可以使用以下方法删除表格数据:
1. 首先,在表格中添加一个删除按钮,点击该按钮时触发删除事件。
```html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
```
2. 在 Vue 实例中定义 `handleDelete` 方法,该方法接收一个参数 `row`,表示要删除的行数据。
```javascript
methods: {
handleDelete(row) {
const index = this.tableData.indexOf(row);
this.tableData.splice(index, 1);
}
}
```
其中,`tableData` 是你的表格数据,`indexOf` 方法用于获取 `row` 在 `tableData` 数组中的索引,`splice` 方法用于从 `tableData` 数组中删除该元素。执行这个方法后,表格中对应的行数据就被删除了。
注意,这种删除方式只是在前端删除了表格数据,不会对后端数据进行删除。如果需要删除后端数据,需要调用后端接口来进行处理。
阅读全文