编程技术是改变世界的力量。
本站
当前位置:网站首页 > 前端框架 > 正文

成功element ui分页1_element ui 分页 bug

gowuye 2024-02-27 10:56 402 浏览 0 评论

<template>

<div>

<!--工具条-->

<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

<el-form :inline="true">

<el-form-item>

<el-input v-model="usernamef" placeholder="用户名"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" v-on:click="getUsers">查询</el-button>

</el-form-item>

<el-form-item>

<el-button type="info" @click="addUser">新增</el-button>

</el-form-item>

</el-form>

</el-col>

<el-table

:data="userInfoList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

style="width: 100%"

>

<el-table-column prop="id" label="ID" width="180"></el-table-column>

<el-table-column prop="username" label="用户名" width="180"></el-table-column>

<!--第二步 开始进行修改和查询操作-->

<el-table-column label="操作" align="center" min-width="100">

<template slot-scope="scope">

<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>

<el-button type="info" @click="modifyuser(scope.row)">修改</el-button>

<el-button type="info" @click="deleteUser(scope.row)">删除</el-button>

</template>

</el-table-column>

<!--编辑与增加的页面-->

</el-table>

<el-pagination

layout="prev, pager, next, sizes, total, jumper"

:page-sizes="[5, 10,100]"

:page-size="pageSize"

:total="userInfoList.length"

@current-change="handleCurrentChange"

@size-change="handleSizeChange"

style="text-align: center;margin-top: 1%;"

></el-pagination>

</div>

</template>

<script>

import axios from "axios";

import qs from "qs";

import { toJSONSchema } from "mockjs";

export default {

data() {

return {

userInfoList: [],

pageSize: 5,

currentPage: 1,

usernamef: "",

};

},

mounted: function () {

this.loadData();

},

methods: {

loadData() {

let param = { username: this.usernamef };

// axios.get("http://localhost:12345/api/test/Gettest2?username="+this.usernamef).then((result) => {

axios

.get("http://localhost:12345/api/test/Gettest2?" + qs.stringify(param))

.then((result) => {

var _data = result.data.data;

this.userInfoList = _data;

});

},

handleCurrentChange: function (cpage) {

this.$data.currentPage = cpage;

},

handleSizeChange: function (psize) {

this.$data.pageSize = psize;

},

modifyuser(rowData) {

this.$router.push("/edit1?id=" + rowData.id);

},

getUsers() {

this.loadData();

},

checkDetail(rowData) {

this.$router.push("/detail1?id=" + rowData.id);

},

},

};

</script>

<style>

body {

background: #dfe9fb;

}

</style>

相关推荐

小程序开源UI库_小程序开源ui库怎么下载

不会设计小程序的UI?没关系,现成的UI库可以立刻设计出高大上的页面。ColorUI:鲜亮的高饱和色彩,专注视觉的小程序组件库github地址:https://github.com/weilanwl/...

22个高质量的微信小程序UI框架!_小程序 ui 框架

1.WeUI地址:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/预览码:2.ColorUI地址:https://git...

大兴安岭木本植物——_大兴安岭特有植物

库页悬钩子 蔷薇科 悬钩子属学名RubusmatsumuranusLevl.etVant.别名 毛叶悬钩子、马林果、托盘、沙窝窝。蒙名 矛日音——布格日勒哲根  矛日音——布勒吉日根形态灌...

前端最常用UI组件库合集_前端ui工具

分享一些用过的很好用的前端UI组件库,帮助我们快速开发。VuePC端UI组件库:ElementUI(多用于后台管理系统)https://element.eleme.cn/#/zh-CNElemen...

一流程序员都有哪些高效学习方法?90%的人不知道

IT行业是一个变化非常快的行业,它需要我们持续去学习新的知识和技能。但是,工作以后,我们经常会发现自己学习的东西很少了。是不是感觉自入行以来,每天都在边学边工作,但是学习的速度还是跟不上技术的发展速...

绩效管理5大技巧!看资深HRBP们如何帮助基层员工提升绩效

第八章 提升在岗员工的绩效1 做好绩效管理价值巨大又到了一年的年初,HRBP管理部的程挚组织各业务部门进行HRBP的年度工作需求调查工作。调查结果收集上来后,发现以下三点排在前三位...

Vue3+Vite+Vant-UI 开发双端招聘APP「独家首发已完结」

来百度APP畅享高清图片//xia栽ke:http://quangneng.com/2390/开发双端招聘APP对招聘行业带来了巨大的改变。首先,双端招聘APP通过移动互联网技术,实现了招聘信息的快速...

在Vue中常见的全局配置有哪些?这5种设置方法你一定使用过

1.基于Vue.js编写的UI库或插件,使用Vue.use()比如UI组件库mint,element,vant,或插件vue-resource等。(暂时忽略按需加载),那么入口文件main.js...

在Excel里输入可以打钩的选择框,这3种方法超简单

私信回复关键词【福利】,获取丰富办公资源~助你高效办公早下班!大家好,我是秋小E~这里是秋叶Excel的【问答精华】专栏!问题主要来自秋叶Excel数据处理学习班的同学,回答由讲师、助教共...

制作选择类EXCEL表格问卷,如何设置可在线打勾复选框?快来学起

平时做有选择项的表格或问卷的时候,通常要添加可以打勾的方框选项和内容。一般操作方法大概就是插入方框形状,然后输入文本。这个插入的方框的形状是不能在电脑上直接点选的。我现在给大家介绍一下,如何设置一个可...

Protopie实战教程:checkbox多选框

本篇文章为大家展示了如何实现checkbox多选框效果~checkbox多选框和radio一样在任何Web和APP应用中都非常常见,且形式更多样,我们所要实现的效果如下:实现步骤如下:1.从Sket...

Excel借助复选框@网络笔记_excel复选框怎么添加

利用Excel制作动态图表,实现数据可视化。如何利用复选框开关制作动态图表呢?制作过程非常简单。接下来,我们将一起制作这样的接线图表。·首先,选择表格并插入折痕图。为了避免数据内容受损,我们需要更...

excel 利用复选框调用图表_excel2016复选框控件怎么设置

大家好,今天讲用复选框调用图表的方法,设置好的效果如下:1、9个人的收入,如下表:2、插入复选框3、九个人,插入九个,右击每个复选框,设置控件格式;如下图:9个复选框如上图那样进行设置4、接下来,准备...

在wps中如何制作可以打对勾的复选框,掌握技巧轻松几步搞定

我是【桃大喵学习记】,点击右上方“关注”,每天为你分享职场办公软件使用技巧干货!我们在平时的工作中经常需要在表格中添加复选框,通过打对勾来确定是什么状态,比如说男、女性别选择等等。那么在使用wps时如...

Excel勾选复选框单元格变色和自动计数,你知道是怎么实现的吗?

Excel中,我们经常会使用复选框来打勾打叉,这是复选框最基本的功能,相信很多小伙伴都会,但今天我跟大家分享的是复选框的其他操作技巧,勾选复选框变色,统计人数。下图中,我们要利用复选框是否打钩来确定哪...

取消回复欢迎 发表评论: