el-tables怎么增添删除
时间: 2023-10-14 14:05:45 浏览: 36
el-table 是 ElementUI 提供的一个表格组件,可以通过以下方式实现增加和删除操作:
1. 增加数据
对于通过表单等方式新增数据,可以直接通过 `table.data.push()` 方法将新数据添加到表格数据中,然后通过 `this.$refs.tableName.setCurrentRow()` 方法将新增的数据选中并滚动到可视区域。
示例代码:
```html
<el-table ref="table" :data="tableData">
<!-- 表格列定义 -->
</el-table>
```
```javascript
// 新增数据
this.tableData.push({
id: '001',
name: '张三',
age: 20,
gender: '男'
});
// 将新增数据选中并滚动到可视区域
this.$refs.table.setCurrentRow(this.tableData[this.tableData.length - 1]);
```
2. 删除数据
对于删除数据,可以通过 `table.data.splice()` 方法将指定数据从表格数据中删除,然后通过 `this.$refs.table.clearSelection()` 方法清空选中状态。
示例代码:
```html
<el-table ref="table" :data="tableData">
<!-- 表格列定义 -->
</el-table>
```
```javascript
// 删除数据
this.tableData.splice(index, 1);
// 清空选中状态
this.$refs.table.clearSelection();
```
其中,`index` 表示要删除的数据在表格数据中的索引。