vue实现分页

第一步

页面添加分页控件

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

@size-change监听用户选择了的页面长度，改变了则触发方法，即重新计算起始以及结束显示的数据
@current-change 监听页面变化的文本输入框，修改当前的页数
:current-page 绑定实际要显示的数据，这个数据是从计算属性方法中把全部数据截取出来的数据
:page-sizes="[10, 20, 30, 40]"确定下拉框显示的每页显示数据的条数
:page-size 绑定现在页的数据
layout="total, sizes, prev, pager, next, jumper"设置当前控件可以使用的功能total总页数, sizes每页显示的条数, prev前一页, pager当前页数, next下一页, jumper跳到第几页

第二步

添加相应的方法

// 分页相关计算属性
const currentData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return tableData.value.slice(startIndex, endIndex)
})

// 处理每页显示条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
}

// 处理当前页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
}

定好所需的变量
//全局保存编辑的行号
const globalIndex = ref(-1)//
const name = ref(‘’)
const currentPage = ref(1)
const pageSize = ref(10)

全部代码：

<template >
  <div style="padding: 10px">

    <el-input style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></el-input>
    <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>

    <el-button type="primary" @click="handleAdd">新增数据</el-button>

    <div style="margin: 10px 0">
      <el-table :data="currentData" border style="width: 100%">
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="type" label="报警程度" />
        <el-table-column prop="errortype" label="报警类别" />
        <el-table-column prop="groupid" label="所属设备组" />
        <el-table-column prop="detail" label="报警信息" />
        <el-table-column prop="solvetime" label="解决时间" />
        <el-table-column prop="solveid" label="解决人" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row, scope.$index)">编辑
            </el-button>
            <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!--弹窗-->
    <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
      <el-form :model="form" label-width="100px" style="padding-right:30px ">
        <el-form-item label="日期">
          <el-input v-model="form.date" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"></el-pagination>

  </div>
</template>

<script lang="ts" setup>

import { reactive, ref, computed, onMounted } from "vue";
import { getErrors } from '@/api/baojing'
const fetchData = () => {
  getErrors().then((response) => {
    // 在这里处理返回的数据JSON.parse()
    tableData.value = JSON.parse(JSON.stringify(response.data));
    console.log(tableData);
    // console.log(data.value);//获取后端数据成功

    // // Clear previous data
    // state0Data.value = [];
    // state1Data.value = [];
    // state2Data.value = [];

    // data.value.forEach(item => {
    //   switch (item.state) {
    //     case 0:
    //       state0Data.value.push(item);
    //       break;
    //     case 1:
    //       state1Data.value.push(item);
    //       break;
    //     case 2:
    //       state2Data.value.push(item);
    //       break;
    //   }
    // });
    // state0.value = state0Data.value.length;
    // state1.value = state1Data.value.length;
    // state2.value = state2Data.value.length;
    // state0.value = state0Data.value.length;
    // console.log(state0Data.value);
    // console.log(state1Data.value);
    // console.log(state2Data.value);
  });
};

onMounted(() => {
  fetchData(); // 在组件挂载后发送请求并获取数据
});
let tableDatas = ref([
  {
    date: '2016-05-03',
    type: '故障',
    errortype: '温度',
    groupid: 123,
    detail: '设备组2的电流异常',
    solvetime: '2018-06-03',
    solveid: 1,

  },
  {
    date: '2016-05-03',
    type: '报警',
    errortype: '温度',
    groupid: 123,
    detail: '设备组2的温度异常',
    solvetime: '2018-06-03',
    solveid: 1,
  },
  {
    date: '2016-05-03',
    type: '解决',
    errortype: '温度',
    groupid: 123,
    detail: '设备组2的电流异常',
    solvetime: '2018-06-03',
    solveid: 1,
  },
  {
    date: '2016-05-03',
    type: '报警',
    groupid: 123,
    errortype: '温度',
    detail: '设备组2的温度异常',
    solvetime: '2018-06-03',
    solveid: 1,
  },

])
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },


  {
    date: '2016-05-03',
    name: 'Jarry',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

let dialogFormVisible = ref(false)


let form = reactive({

  date: "",
  name: "",
  address: "",

})
//全局保存编辑的行号
const globalIndex = ref(-1)
const name = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

//新增数据 设置新的空的绑值对象 打开弹窗
const handleAdd = () => {
  //打开弹窗
  dialogFormVisible.value = true
}

//保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
const save = () => {
  if (globalIndex.value >= 0) {
    //表示编辑
    tableData.value[globalIndex.value] = form
    //还原回去
    globalIndex.value = -1
  } else {
    //新增
    tableData.value.push(form)
  }

  dialogFormVisible.value = false
}

//编辑数据 先赋值到表单再弹窗
const handleEdit = (row, index) => {
  const newObj = Object.assign({}, row)
  form = reactive(newObj)
  //把当前编辑的行号赋值给全局保存的行号
  globalIndex.value = index
  console.log(globalIndex.value)
  dialogFormVisible.value = true
}

//删除数据 从index位置开始，删除一行即可
const remove = (index) => {
  tableData.value.splice(index, 1)
}

//查询数据
const search = () => {
  tableData.value = tableData.value.filter(v => v.name.includes(name.value))
}

// 分页相关计算属性
const currentData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return tableData.value.slice(startIndex, endIndex)
})

// 处理每页显示条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
}

// 处理当前页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
}

</script>

我正在修改我的页面所以出现列属性不对应的情况，请忽略