vue-elementui-el-table列表表单数据回填（在点击过分页、搜索查询后依旧回填之前填写的数据）

在Vue.js中使用Element UI的el-table组件时，如果需要在分页或搜索后保持表格的数据回填状态，可以通过在数据更新时保存当前页和过滤条件，并在数据重新加载后应用这些状态。

以下是一个简单的示例：

<template>
  <div>
    <el-table :data="filteredData">
      <!-- 表格列 -->
    </el-table>
 
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="filteredData.length">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      searchQuery: '',
      tableData: [], // 完整数据
    };
  },
  computed: {
    // 计算属性用于分页
    filteredData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.filter(row => {
        // 根据条件筛选数据
        return row.includes(this.searchQuery);
      }).slice(start, end);
    },
  },
  methods: {
    // 分页大小改变时的处理函数
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页改变时的处理函数
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 模拟从服务器获取数据的函数
    fetchData() {
      // 假设从服务器获取数据
      this.tableData = [...]; // 获取到的数据
    }
  },
  mounted() {
    this.fetchData(); // 组件加载完成后获取数据
  }
};
</script>

在这个例子中，tableData保存了完整的数据集，而filteredData是根据当前页和搜索条件计算得到用于展示的数据。使用.sync修饰符来同步currentPage和分页组件的当前页属性，这样在分页时不会丢失当前的页码状态。

请注意，这个例子中的fetchData和filteredData的实现是模拟的，你需要根据实际的数据获取逻辑来替换它们。同时，这里没有实现搜索查询的处理，你可以根据需要在filteredData的计算中加入搜索逻辑。