vxe-table使用remove源数并没有改变
时间: 2023-08-02 17:07:18 浏览: 111
vxe-table 的 remove 方法在默认情况下不会直接修改原始数据源,而是会创建一个新的数据源并返回。如果你想要删除原始数据源中的数据,可以在对应的事件中手动修改原始数据源。
例如,在使用 remove 方法删除某一行后,可以在对应的 success 事件中通过 splice 方法从原始数据源中删除该行,示例代码如下:
```javascript
this.$refs.table.remove([row]).then(() => {
const index = this.data.indexOf(row)
if (index !== -1) {
this.data.splice(index, 1)
}
})
```
其中,`this.data` 是原始数据源。这样,当你调用 remove 方法删除某一行时,原始数据源也会相应地更新。
相关问题
vxe-table使用remove没有用
如果你使用 vxe-table 的 remove 方法删除数据没有生效,可能是因为你没有正确的绑定数据。请确保你的 table 组件和数据源正确的绑定了。
此外,你还可以检查以下几点:
1. 确认你要删除的数据在数据源中存在,如果不存在,那么删除操作将无效。
2. 确认你的删除操作触发了更新数据源的方法,如:`this.$set(this.tableData, index, newData)`。
3. 确认你的表格组件的配置项中开启了 `checkbox-config` 或 `radio-config`,否则无法进行选择删除的操作。
如果以上方法都不能解决你的问题,可以将你的代码贴出来,以便更好地帮助你解决问题。
vxe-table 表格删除
vxe-table表格删除可以通过以下步骤实现:
1. 在表格中添加一个操作列,用于显示删除按钮。
2. 在操作列中使用vxe-button或者其他按钮组件,并绑定点击事件。
3. 在点击事件中获取当前行的索引,可以使用rowIndex或者其他方式获取。
4. 调用表格的remove方法,传入当前行的索引,即可删除当前行。
具体实现可以参考以下代码:
<vxe-table :data="tableData">
<vxe-column title="姓名" field="name"></vxe-column>
<vxe-column title="年龄" field="age"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row, column, rowIndex, columnIndex }">
<vxe-button type="text" @click="delRow(rowIndex)">删除</vxe-button>
</template>
</vxe-column>
</vxe-table>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
delRow(index) {
this.$refs.table.remove(index)
}
}
}
</script>