element ui 中依据表中属性删除数据
时间: 2023-11-11 21:57:04 浏览: 119
Vue+Element ui 根据后台返回数据设置动态表头操作
在 Element UI 中,要根据表格中的属性删除数据,你可以使用 Element UI 提供的 Table 组件的删除操作。首先,你需要在你的表格中添加一个操作列,该列包含一个删除按钮。在点击删除按钮时,你可以获取到当前行的数据对象,然后根据该对象的属性进行删除操作。
以下是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
```javascript
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
};
},
methods: {
handleDelete(row) {
const index = this.tableData.indexOf(row);
if (index !== -1) {
this.tableData.splice(index, 1);
}
}
}
```
在上面的示例中,我们给表格添加了一个操作列,该列包含一个删除按钮。当点击删除按钮时,会调用 `handleDelete` 方法,并将当前行的数据对象作为参数传递进去。在 `handleDelete` 方法中,我们使用 `indexOf` 方法获取当前行在 `tableData` 数组中的索引,并使用 `splice` 方法从数组中删除该行。
阅读全文