并没有涉及请求 但是就是卡顿
时间: 2024-04-26 17:25:10 浏览: 10
如果删除操作没有涉及到网络请求等耗时操作,但是仍然存在卡顿问题,那么可能是因为在进行删除操作时,页面重新渲染导致的卡顿。
当进行删除操作时,如果使用的是 Vue 框架,那么可能会触发组件的重新渲染,特别是在表格数据较多的情况下,重新渲染可能会比较耗时,导致卡顿现象。
此时,可以考虑使用 Vue 的 v-show 指令来控制删除行的显示和隐藏,而不是直接操作数据。这样可以避免触发重新渲染,提高删除操作的效率。
具体实现方式是,在表格中使用 v-show 指令来控制删除行的显示和隐藏。例如,可以给每一行数据添加一个 "deleted" 属性,用来标记该行是否被删除。然后,在模板中使用 v-show 指令来控制该行数据的显示和隐藏。例如:
```
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
...
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button v-show="!scope.row.deleted" @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
```
然后,在删除操作中,只需要将该行数据的 "deleted" 属性设置为 true,就可以控制该行数据的隐藏。例如:
```
function deleteRow(index, row) {
row.deleted = true; // 标记该行数据已删除
}
```
这样就可以避免重新渲染表格,提高删除操作的效率。