elementui表格删除行
时间: 2023-11-08 19:02:10 浏览: 173
element-ui 表格删除行的方法是通过调用表格组件的 remove 方法来实现。具体步骤如下:
1. 在表格组件中,给每一行添加一个删除按钮,通过按钮的点击事件来触发删除操作。
2. 在点击事件回调函数中,获取当前行的索引或唯一标识符。
3. 调用表格组件的 remove 方法,传入获取到的索引或唯一标识符,以删除对应的行。
下面是一个示例代码:
```vue
<template>
<div>
<el-button type="primary" @click="removeRow">删除行</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="removeRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京' },
{ name: '李四', age: 20, address: '上海' },
{ name: '王五', age: 22, address: '广州' },
]
}
},
methods: {
removeRow(index) {
this.tableData.splice(index, 1);
}
}
}
</script>
```
在上面的示例代码中,点击 "删除行" 按钮或某一行的 "删除" 按钮都会调用 `removeRow` 方法来删除对应的行。
阅读全文