如何在Vuetify中重置表格分页选项回到第一页

当前处于表格分页的第2页

当前表格的options配置如下：

需求：新增一条记录后，调用API执行表格的updateData()方法更新数据时，需要将分页重置回第一页。
此前尝试的无效实现代码：

this.options = {}

现有深度监听options的逻辑代码：

watch: {
    options: {
        handler() {
            this.getData(this.options)
        },
        deep: true
    }
},

直接给this.options赋值空对象无效，核心原因是这种写法会清空表格所有配置（列规则、分页大小、请求参数等），导致组件逻辑异常，自然达不到预期效果。按以下方式实现即可：

• 先确认配置中存储当前页码的字段，绝大多数表格组件的当前页码字段为currentPage或pageNum，挂载在options对象下。在新增记录的接口请求成功回调中，先手动将页码字段设为1，再调用数据更新方法：

// 新增接口请求成功后执行
this.options.currentPage = 1 // 若你的页码字段为pageNum，替换为this.options.pageNum = 1即可
this.updateData()

• 若使用的表格组件是内部自行维护分页状态，页码没有挂载在options上，直接查阅对应组件文档，调用组件自带的重置分页实例方法即可，不需要强行修改options触发逻辑。如果确实需要通过已写的深度监听触发表格刷新，也不要整体替换options对象，仅修改页码属性即可。Vue2场景下如果担心属性修改不触发响应式更新，可以用$set方法赋值：

// Vue2 响应式兼容写法
this.$set(this.options, 'currentPage', 1)
// Vue3 场景可直接赋值属性
// this.options.currentPage = 1
this.updateData()

注意：你配置的options深度监听，只要检测到对象内部属性变化就会触发getData逻辑，不需要将整个对象重置为空值。仅修改页码参数既能触发列表刷新，又不会丢失其他表格配置，不会引发额外异常。

内容的提问来源于stack exchange，提问作者code-8