el-pagination如何实现点击切换表格分页保留上一页表格中每一行填入的数量

要实现点击切换表格分页并保留上一页表格中每一行填入的数量，可以使用以下步骤：

1. 在表格中添加一个隐藏的input元素，用来存储每一行填入的数量。可以将每一行的数量作为data属性添加到tr元素上，并使用JavaScript将其存储到input元素中。

2. 在el-pagination的change事件中，获取当前页码和每页显示的数量。

3. 在点击切换分页时，将当前页码和每页显示的数量传递给后端，获取新的表格数据。

4. 在获取到新的表格数据后，将其渲染到表格中，并使用JavaScript将之前填入的数量重新填入到新的表格中。

以下是一个示例代码：

HTML:

<table id="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr data-quantity="10">
      <td>数据1</td>
      <td>数据2</td>
      <td><input type="text" class="quantity-input" value="10"></td>
    </tr>
    <tr data-quantity="5">
      <td>数据3</td>
      <td>数据4</td>
      <td><input type="text" class="quantity-input" value="5"></td>
    </tr>
  </tbody>
</table>

<div id="pagination"></div>

JavaScript:

// 初始化el-pagination
new Vue({
  el: '#pagination',
  data: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  },
  methods: {
    handleChangePage() {
      // 获取当前页码和每页显示的数量
      const { currentPage, pageSize } = this;
      
      // 发送请求，获取新的表格数据
      // 假设请求返回的数据为response
      const response = {
        data: [
          { column1: '数据5', column2: '数据6', quantity: 8 },
          { column1: '数据7', column2: '数据8', quantity: 3 }
        ],
        total: 15
      };
      
      // 渲染新的表格数据
      const tableBody = document.querySelector('#table tbody');
      tableBody.innerHTML = '';
      response.data.forEach(item => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${item.column1}</td>
          <td>${item.column2}</td>
          <td><input type="text" class="quantity-input" value="${item.quantity}"></td>
        `;
        tableBody.appendChild(tr);
      });
      
      // 将之前填入的数量重新填入到新的表格中
      const quantityInputs = document.querySelectorAll('.quantity-input');
      quantityInputs.forEach((input, index) => {
        const previousQuantity = tableBody.getElementsByTagName('tr')[index].getAttribute('data-quantity');
        input.value = previousQuantity;
      });
      
      // 更新总记录数
      this.total = response.total;
    }
  },
  mounted() {
    // 初始化表格数据
    this.handleChangePage();
  }
});

上述代码中，我们使用了Vue.js和原生JavaScript来实现点击切换表格分页并保留上一页表格中每一行填入的数量。在el-pagination的change事件中，调用handleChangePage方法来获取新的表格数据，并将之前填入的数量重新填入到新的表格中