el-pagination 实现表格分页切换并保留数量 - Vue.js & JavaScript

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

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 方法来获取新的表格数据，并将之前填入的数量重新填入到新的表格中。