iview table表格点击外部按钮删除行添加行
时间: 2024-02-21 13:04:51 浏览: 24
要实现这个功能,你需要做以下几个步骤:
1. 在 iView table 中,添加两个按钮,一个用于删除行,一个用于添加行。
2. 在按钮的 click 事件中,分别调用 table 的 remove() 和 append() 方法来删除和添加行。
3. 要实现点击外部按钮删除行的功能,你需要在页面中使用 ref 来获取到 table 的实例,然后在按钮的 click 事件中,通过 $refs.table 来调用 remove() 方法。
4. 同样的,要实现点击外部按钮添加行的功能,你也需要在页面中使用 ref 来获取到 table 的实例,然后在按钮的 click 事件中,通过 $refs.table 来调用 append() 方法。
下面是一个示例代码:
```html
<template>
<div>
<Button @click="removeRow">删除行</Button>
<Button @click="addRow">添加行</Button>
<Table :data="tableData" ref="table">
<TableColumn prop="name" label="姓名"></TableColumn>
<TableColumn prop="age" label="年龄"></TableColumn>
<TableColumn prop="address" label="地址"></TableColumn>
</Table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
],
};
},
methods: {
removeRow() {
this.$refs.table.remove(this.tableData[0]);
},
addRow() {
this.$refs.table.append({ name: '赵六', age: 24, address: '深圳市' });
},
},
};
</script>
```
在这个示例中,我们在 iView table 中添加了两个按钮,并分别绑定了 removeRow() 和 addRow() 两个方法。在这两个方法中,我们分别通过 $refs.table 来调用了 table 的 remove() 和 append() 方法来删除和添加行。同时,我们也使用了 ref 来获取到了 table 的实例。这样,就可以实现在外部按钮中删除和添加 table 表格行的功能了。