Element+分页首页数据显示问题-一一网

1. 说明

新人，代码不够优雅，问题颇多，请见谅。只为记录问题

2. 问题

使用 Element+ 实现数据分页之后，看似首页数据显示前十条数据 0-10

当点击第二页的时候会发现页码对应显示的数据是数组下标所对应的数组 21-30

再点击第一页数据也会变成 11-20

3. 原因

table 按照页码改变监听事件传入的 index 去拿对应数组下标的数据，导致数据二维数组中下标为 0 的首页 0-10 数据获取不到

4. 解决

1. 在页码改变监听事件中传入的页码索引减 1

   const handleCurrentChange = (index) => {
     data.page = index - 1;
   };
复制代码

1. 在页面渲染获取当前页时将定义的页码加 1

   :current-page="data.page + 1"
复制代码

5. 完整代码

  <!-- 引入分页组件 -->
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="data.page + 1"
    layout="total, prev, pager, next, jumper"
    :total="data.total"
  >
  </el-pagination>
复制代码

  setup() {
    let data = reactive({
      table: [],
      page: 0,
      total: 0,
    });

    // 数据分页
    let getCourseListFun = async (obj) => {
      let arr = await getCourseList(obj);
      data.total = arr.length;
      let newArr = [],
          end = 10;
      for (let index = 0; index < arr.length; index += 10) {
        newArr.push(arr.slice(index, end));
        end += 10;
      }
      data.table = newArr;
    };
    getCourseListFun();

    // 页码监听事件
    const handleCurrentChange = (index) => {
      data.page = index - 1;
    };

    return {
      data,
      handleCurrentChange,
    };
  },
复制代码