vue,element ui中的el-select数据量大实现下拉框分页

tech2025-08-10  4

分页组件还是用element ui里的,这样相对而言代码更简洁了,el-select下拉框分页代码具体如下:

<template> <el-select v-model="valueuser" placeholder="请选择用户" class="interval" @change="selectuser"> <el-option v-for="item in userlist.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="item.userId" :label="item.username" :value="item.userId"> </el-option> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="totalnum"> </el-pagination> </el-select> </template> <script> export default { data() { return { valueuser:"", userlist:[], //分页 currentPage: 1, pagesize:10, totalnum:50, }; }, mounted() { this.getalluserid(); }, getalluserid(){ this.$http .get(`你请求的接口地址` { }) .then(res => { // console.log(res.data) //this.userlist=res.data; this.valueuser=res.data.userId; this.totalnum=res.data.length; console.log(this.totalnum); this.userlist=res.data; }); }, handleSizeChange(val) { //console.log(`每页 ${val} 条`); this.pagesize=val; }, handleCurrentChange(val) { //console.log(`当前页: ${val}`); this.currentPage=val; } } </script>

结果图如下:

最新回复(0)