1.

  • New person, code is not elegant enough, many problems, please forgive me. Just to document the problem

Problem 2.

  • After using Element+ to implement data pagination, it looks like the first ten data shows 0-10

  • When you click on the second page, you will find that the data corresponding to the page number is the array 21-30 corresponding to the array subscript

  • Click on the first page again and the number will be 11-20

3. The reason why

  • Table changes the index passed in by the listening event according to the page number to get the data with the corresponding array subscript. As a result, the 0-10 data on the first page with the subscript 0 in the two-dimensional data array cannot be obtained

4. Solve

    1. The page number index passed in the page change listen event is reduced by 1
   const handleCurrentChange = (index) = > {
     data.page = index - 1;
   };
Copy the code
    1. Increments the page number defined when the page is rendered to fetch the current page
   :current-page="data.page + 1"
Copy the code

5. Complete code

  <! -- Introducing a paging component -->
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="data.page + 1"
    layout="total, prev, pager, next, jumper"
    :total="data.total"
  >
  </el-pagination>
Copy the code
  setup() {
    let data = reactive({
      table: [].page: 0.total: 0});// Data paging
    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();

    // page number listening event
    const handleCurrentChange = (index) = > {
      data.page = index - 1;
    };

    return {
      data,
      handleCurrentChange,
    };
  },
Copy the code

6. tips

  • There’s got to be more elegant, better solutions, just for the record