element ui表格删除一行
时间: 2023-09-05 18:06:52 浏览: 41
要删除 Element UI 表格中的一行,可以使用以下步骤:
1. 给表格中的每一行添加一个唯一的标识符,例如 `row-key` 属性。例如:
```html
<el-table :data="tableData" row-key="id">
<!-- 表格列定义 -->
</el-table>
```
2. 定义一个删除方法,在该方法中从数据源中删除指定行,例如:
```javascript
methods: {
handleDelete(row) {
const index = this.tableData.indexOf(row)
this.tableData.splice(index, 1)
}
}
```
3. 在表格中添加一个操作列,其中包含删除按钮,并将该方法绑定到该按钮的 `click` 事件中,例如:
```html
<el-table :data="tableData" row-key="id">
<!-- 表格列定义 -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
这样,当用户点击删除按钮时,对应行将被从数据源中删除,表格也会自动更新。