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.valueconst endIndex = startIndex + pageSize.valuereturn 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 = indexconsole.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.valueconst endIndex = startIndex + pageSize.valuereturn tableData.value.slice(startIndex, endIndex)
})// 处理每页显示条数变化
const handleSizeChange = (val) => {pageSize.value = val
}// 处理当前页码变化
const handleCurrentChange = (val) => {currentPage.value = val
}</script>