当前位置：首页 > VUE

vue实现表格重置功能

2026-01-21 12:39:09VUE

实现表格重置功能的方法

在Vue中实现表格重置功能通常涉及清空或恢复表格数据、分页、筛选条件等状态。以下是几种常见实现方式：

使用v-model绑定数据

通过v-model绑定表格数据，重置时直接恢复初始值：

<template>
  <el-table :data="tableData" v-loading="loading">
    <!-- 表格列定义 -->
  </el-table>
  <el-button @click="resetTable">重置表格</el-button>
</template>

<script>
export default {
  data() {
    return {
      originalData: [], // 初始数据备份
      tableData: [],    // 当前表格数据
      loading: false
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      const res = await api.getData()
      this.tableData = res.data
      this.originalData = [...res.data] // 深拷贝初始数据
      this.loading = false
    },
    resetTable() {
      this.tableData = [...this.originalData] // 恢复初始数据
    }
  }
}
</script>

结合表单重置

当表格包含筛选表单时，可同时重置表单和表格：

<template>
  <el-form ref="filterForm" @submit.native.prevent>
    <el-form-item label="名称" prop="name">
      <el-input v-model="filterForm.name"></el-input>
    </el-form-item>
    <!-- 其他筛选条件 -->
  </el-form>
  <el-table :data="filteredData">
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      filterForm: { name: '', status: '' },
      allData: []
    }
  },
  computed: {
    filteredData() {
      return this.allData.filter(item => 
        item.name.includes(this.filterForm.name)
      )
    }
  },
  methods: {
    resetTable() {
      this.$refs.filterForm.resetFields() // 重置表单
      this.fetchData() // 重新获取数据
    }
  }
}
</script>

使用Vuex管理状态

对于复杂场景，可通过Vuex集中管理表格状态：

// store/modules/table.js
const state = {
  tableData: [],
  pagination: { page: 1, size: 10 }
}

const mutations = {
  RESET_TABLE(state) {
    state.tableData = []
    state.pagination = { page: 1, size: 10 }
  }
}

组件中调用：

methods: {
  resetTable() {
    this.$store.commit('table/RESET_TABLE')
    this.fetchData()
  }
}

第三方表格组件重置

如使用Element UI的Table组件，可利用其提供的方法：

<el-table ref="dataTable">
  <!-- 表格内容 -->
</el-table>

<script>
export default {
  methods: {
    resetTable() {
      this.$refs.dataTable.clearSort()  // 清除排序
      this.$refs.dataTable.clearFilter() // 清除筛选
      this.tableData = [...this.originalData] // 重置数据
    }
  }
}
</script>

完整重置方案示例

结合数据、分页、筛选的完整重置：

resetTable() {
  // 重置数据
  this.tableData = [...this.originalData]

  // 重置分页
  this.pagination = {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }

  // 重置筛选条件
  this.filterParams = {
    keyword: '',
    status: null
  }

  // 重置排序
  this.sortParams = {
    prop: '',
    order: ''
  }

  // 重新加载数据
  this.loadData()
}

根据具体需求选择合适的方法，注意处理数据深拷贝问题以避免引用类型数据修改导致的意外行为。

vue实现表格重置功能