el-pagination 点击切换分页保留缓存数据 - Vue.js 实现指南 - 常规

<template>
  <div>
    <div v-if="currentPage === 1">
      <input type="text" v-model="inputData.field1">
    </div>
    <div v-if="currentPage === 2">
      <input type="text" v-model="inputData.field2">
    </div>
    <div v-if="currentPage === 3">
      <input type="text" v-model="inputData.field3">
    </div>
<pre><code>&lt;button @click=&quot;previousPage&quot; :disabled=&quot;currentPage === 1&quot;&gt;Previous&lt;/button&gt;
&lt;button @click=&quot;nextPage&quot; :disabled=&quot;currentPage === totalPages&quot;&gt;Next&lt;/button&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalPages: 3,
      currentPage: 1,
      inputData: {
        field1: '',
        field2: '',
        field3: ''
      }
    };
  },
  mounted() {
    // 从缓存中恢复数据
    const cachedData = JSON.parse(localStorage.getItem('paginationData'));
    if (cachedData) {
      this.inputData = cachedData;
    }
  },
  methods: {
    nextPage() {
      // 保存当前分页数据到缓存
      localStorage.setItem('paginationData', JSON.stringify(this.inputData));
      this.currentPage++;
    },
    previousPage() {
      // 保存当前分页数据到缓存
      localStorage.setItem('paginationData', JSON.stringify(this.inputData));
      this.currentPage--;
    }
  }
};
</script>
<p>在上面的示例中，我们使用了一个 Vue 组件来实现 el-pagination 的分页功能。每个分页中的输入字段与数据对象中的一个属性相绑定，这样当用户填写输入字段时，数据对象中的对应属性也会更新。</p>
<p>在 mounted 生命周期钩子中，我们从缓存中恢复数据，并在 nextPage 和 previousPage 方法中保存当前分页的数据到缓存中。</p>
<p>这样，当用户切换分页时，之前填写的数据会被保存到缓存中，并在返回到之前的分页时被重新填充到输入字段中。</p>