vue,element ui中的el-select数据量大实现下拉框分页
分页组件还是用element ui里的,这样相对而言代码更简洁了,el-select下拉框分页代码具体如下:<template><el-select v-model="valueuser" placeholder="请选择用户" class="interval" @change="selectuser"><el-optionv-for="item in userlis
·
分页组件还是用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>
结果图如下:
更多推荐
已为社区贡献6条内容
所有评论(0)