前端 - 实现分页功能但是跳转页面不能展示分割好的数据？

Question

<el-table :data="tables.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border stripe>        <el-table-column type="index" label="#"></el-table-column>        <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop" :label="item.label">          <template slot-scope="scope">            <el-button type="text" @click="showDialogTableVisibleEmbed(scope.row)">{{              scope.row[item.prop] }}</el-button>          </template>        </el-table-column></el-table>

  <el-pagination layout="total,sizes,prev,pager,next,jumper" @size-change="handleSizeChange"        @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"        :page-sizes="[10, 20, 25, 30]" :total="totalLen">  </el-pagination>

handleSizeChange (val) {      this.pageSize = val      this.updateData()    },    handleCurrentChange (val) {      this.currentPage = val      this.updateData()    },

Answer 1

根据你提供的代码，<el-table> 组件和 <el-pagination> 组件看起来是正确的，并且你已经正确处理了分页的逻辑。不过根据你的问题描述，你说跳转页面后不能展示分割好的数据，那么可能存在一些其他的问题。

首先，请确保以下几点：

tables 数组包含了完整的数据，包括所有需要展示的数据，而不仅仅是当前页的数据。tables 应该是一个包含所有数据的数组。
columnList 数组包含了列的配置，确保每个 item.prop 对应 tables 中的正确字段名。
totalLen 属性应该设置为 tables 数组的总长度，而不是当前页显示的数据的长度。
在分页的处理中，currentPage 和 pageSize 用于控制当前页数和每页显示的数量。在翻页时，你通过 handleCurrentChange 和 handleSizeChange 方法来更新 currentPage 和 pageSize，并调用 updateData() 方法来更新数据。

请确保在 updateData() 方法中对 tables 数组进行正确的更新，即保持它包含所有数据，并根据 currentPage 和 pageSize 进行数据的分割。

另外，如果在跳转页面后，数据仍然没有正确展示，可能存在其他问题。你可以尝试在开发者工具中查看控制台输出，看是否有任何错误信息。另外，你可以在 updateData() 方法中添加一些调试输出，查看 tables 数组的内容是否正确，以帮助你定位问题所在。

最后，如果问题仍然无法解决，请提供更多代码和具体的错误描述，这样能帮助我更好地理解和定位问题。