elementui表格中删除整行
时间: 2024-04-24 19:22:58 浏览: 122
Vue2.0+ElementUI实现表格翻页的实例
在 Element UI 表格中删除整行,你可以使用 `splice` 方法来删除数据源中的对应行,然后重新渲染表格即可。下面是一个示例代码:
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
<el-table-column
label="Action">
<template slot-scope="scope">
<el-button
type="danger"
@click="deleteRow(scope.$index)">
Delete
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Tom', age: 35 },
]
};
},
methods: {
deleteRow(index) {
this.tableData.splice(index, 1);
}
}
};
</script>
```
在上述示例中,我们使用 `splice` 方法删除了 `tableData` 数组中的指定行。当点击对应行的删除按钮时,会调用 `deleteRow` 方法,并传入索引值作为参数,然后使用 `splice` 方法删除该行。这样就能实现在 Element UI 表格中删除整行的功能。
阅读全文