精华内容
下载资源
问答
  • springboot+mybatisplus+vue+elementUI实现后台分页,资源齐全,前后台代码都有,数据库语句也有
  • ElementUI分页组件+Vue

    万次阅读 2018-11-14 11:27:38
    ElementUI分页组件 1 官网 官网地址:http://element-cn.eleme.io/#/zh-CN 2 入门案例: 第一步:创建vue的基本页面 <!DOCTYPE html> <html lang="en"&amp...

    一. ElementUI分页组件

    1 官网

    官网地址:http://element-cn.eleme.io/#/zh-CN

    2 入门案例:

    第一步:创建vue的基本页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../vue-2.5.17.js"></script>
    </head>
    <body>
    <div id="app">
    </div>
    <script>
    
    var vm = new Vue({
       el:"#app"
    
    });
    
    
    </script>
    
    </body>
    </html>
    

    第二步:引入elementUI的组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../vue-2.5.17.js"></script>
    
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    </head>
    <body>
    <div id="app">
    
    </div>
    <script>
    
    var vm = new Vue({
       el:"#app"
    
    });
    </script>
    </body>
    </html>
    

    第三步:搜索分页组件栏

    在这里插入图片描述

    在这里插入图片描述

    复制代码:

    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
    

    第五步:添加事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../vue-2.5.17.js"></script>
    
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    
    </head>
    <body>
    <div id="app">
    
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <script>
    
    var vm = new Vue({
       el:"#app",
       data:{
           currentPage:3,// 当前页码
           pageSize:10,// 每页大小
           total:1000
       },
       methods:{
           //? 长度改变----改变每页显示的条数的时候  自动触发
           handleSizeChange(val){
               console.log("长度改变:"+val)
           },
           // 当前改变----当前页码改变之后,触发这个函数
           handleCurrentChange(val){
               console.log("当前改变:"+val)
           }
       }
    });
    </script>
    </body>
    </html>
    

    3 整合项目

    3.1 .1BaseResult

    在这里插入图片描述

    public class BaseResult {
        private Long total;
        private Object data;
    }
    

    3.2.2 GoodsService

    public BaseResult findByPage(Integer page, Integer rows){
        PageHelper.startPage(page,rows);
        List<Goods> list = goodsMapper.select(null);
        PageInfo<Goods> info = new PageInfo<>(list);
    
        BaseResult baseResult = new BaseResult();
        baseResult.setTotal(info.getTotal());
        baseResult.setData(info.getList());
    
        return baseResult;
    }
    

    3.2.3 GoodsController

    @GetMapping
        public ResponseEntity<BaseResult> findByPage(Integer page,Integer rows){
            BaseResult baseResult = goodsService.findByPage(page, rows);
            return new ResponseEntity<>(baseResult,HttpStatus.OK);
        }
    

    3.3.4Goods.html页面

    第一步:引入ElementUI库文件

        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

    第二步:引入分页组件内容

    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
    

    第二步:定义变量,保存数据

    在这里插入图片描述

    第三步:修改InitList方法,请求后台数据

    在这里插入图片描述

    第四步:点击页面条数,更新页面数据

    在这里插入图片描述

    第五步:点击页码,更新页面数据

    在这里插入图片描述

    展开全文
  • elementui分页调取接口

    2021-06-15 10:07:38
    <el-pagination @size-change=“handleSizeChange” //每页多少条函数 @current-change=“handleCurrentChange” //当前页面函数 :current-page=“pageNum” //当前页数 :page-sizes="[1, 2]" //每页显示几条 ...
    <el-pagination
                @size-change="handleSizeChange"    //每页多少条函数
                @current-change="handleCurrentChange"  //当前页面函数
                :current-page="pageNum"  //当前页数
                :page-sizes="[1, 2]"   //每页显示几条
                :page-size="pageSize"  //每页显示条数
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"  //总条数
              >
     </el-pagination>
    
    
    data() {
        return {
          pageSize:1,//每页显示条数
          pageNum:0,//当前页数
          total:0,//总条数
        };
      },
    
      
    methods: {
     //每页多少条函数
        handleSizeChange(val) {
          // console.log(`每页 ${val} 条`);
          this.pageSize=val;
          this.findServiceDetails();
        },
         //当前页面函数
        handleCurrentChange(val) {
          // console.log(`当前页: ${val}`);
          this.pageNum=val
          this.findServiceDetails()
        },
        findServiceDetails(){
          let token = localStorage.getItem("token");
          let data={
              pageNum:this.pageNum, //页数
              pageSize:this.pageSize, //每页显示条数
              priceCode:this.form.chargecode, //编码
              name:this.form.entryname //名称
            }
          this.$http({
            method: "get",
            url:"接口",
            params:data,
            headers: {
              Authorization: "Bearer " + token,
              "content-type": "application/x-www-form-urlencoded",
            },
          }).then((res) => {
            console.log(res);
            this.tableData=res.data.rows
            this.total=res.data.total
          });
        }
      },
    
    展开全文
  • Elementui 分页查询的实现 首先确定,数据库分页查询代码(以MySql数据库为例) SELECT * FROM user LIMIT #{beginNum},#{everyPage} beginNum:从哪个值开始,一般数据库表第一个值的位置序号为0,从0开始往下查 ...

    Elementui 分页查询的实现

    1. 首先确定,数据库分页查询代码(以MySql数据库为例)

      SELECT * FROM user LIMIT #{beginNum},#{everyPage}
      beginNum:从哪个值开始,一般数据库表第一个值的位置序号为0,从0开始往下查
      everyPage:每页多少个数据
      
    2. 所以我们确定了,数据库需要的两个数据。我们从前端往后面传值的时候,往往选择传送的两个值是(1)当前页数(pageCode),(2)每页的数据总量(pageSize),所以我们需要计算一下数据库需要的数据。

      		int beginNum = 0;     /*因为传来的当前页可能为0,所以要判断一下*/
              if (nowPage != 0){
                  beginNum = (nowPage - 1) * pageSize;
              }
      
    3. 现在可以编写后端代码了,因为我还做了一个查询数据总量,不需要的同学可以不用做。且我用的是IDEA做的springboot项目,我直接放代码了(不太重要的就不放了)。

      1. 先编写 mapper 文件以及 mapper.xml 文件
      mapper文件:
      /**
           * 查询user表总记录数
           * @return
           */
          int selectUserCounts();
      
          /**
           * 分页查询用户
           * @param map
           * @return
           */
          List<User> selectUserList(Map<String,Object> map);
      
      
      mapper.xml文件
          <!--查询user表总记录数-->
        <select id="selectUserCounts" resultType="int">
          select count(*) from user
        </select>
        <!--分页查询用户-->
          <select id="selectUserList" parameterType="map" resultMap="BaseResultMap">
          SELECT * FROM user LIMIT #{beginNum},#{everyPage}
        </select>
      
      1. 编写service 文件
      @Service
      public class UserServices {
          @Autowired
          private UserMapper userMapper;
          /**
           * 分页查询用户
           * @param nowPage 当前第几页
           * @param pageSize  每页多少数据
           * @return
           */
          public Map<String,Object> queryUserList(int nowPage,int pageSize){
              /*查询总记录数*/
              int totalRecord = userMapper.selectUserCounts();
              int beginNum = 0;
              if (nowPage != 0){
                  beginNum = (nowPage - 1) * pageSize;
              }
              Map<String,Object> queryMap = new HashMap<>();
              queryMap.put("beginNum",beginNum);
              queryMap.put("everyPage",pageSize);
      
              List<User> queryUserList = userMapper.selectUserList(queryMap);
              Map<String,Object> outMap = new HashMap<>();
              outMap.put("total",totalRecord);
              outMap.put("list",queryUserList);
              return  outMap;
          }
      }
      
      
      1. 编写controller文件

        @RestController    /* 使返回的数据转为 json 格式的数据 */
        @RequestMapping("/user")
        public class UserinfoController {
            @Autowired
            private UserServices userServices;
            /**
             * 分页查询用户
             * @param queryMap
             * @return
             */
            @RequestMapping("/queryUserListt")
            public Map<String,Object> queryUserList(@RequestBody Map<String,Object> queryMap){
                int nowPage = Integer.parseInt(queryMap.get("pageCode").toString());
                int pageSize = Integer.parseInt(queryMap.get("pageSize").toString());
                return userServices.queryUserList(nowPage,pageSize);
            }
        }
        
        
    4. 现在再来看前端代码,注意:我的分页已经做了封装了,封装成组件了,不过大意还是一样的

      1. 现将组件导入,注册
      <script>
          import Paginate from '~/components/Pagination/Paginate.vue'; /*导入,注意不啊哟丢了分号 ;  */
          export default {
              components: {
              Paginate          /*注册组件,局部注册*/
              },
          }
      </script>
      
      1. 在table下,放下该组件
        <el-table :data="userList" border ref="table" style="width: 100%">
           <!-- 此处改为你的table表格,我为了简单明了直接省略了-->      
        </el-table>
              <Paginate                <!-- 这就是那个分页组件-->    
                      api="queryUserList"    <!-- 接口路径--> 
                      :params="params"        <!--往后端传送的主体--> 
                      :refresh="refresh"               <!--用于搜索--> 
                      @val-change="changeUserList">      <!--自定义方法使得得到userlist-->
              </Paginate>
      
      1. 现在我要放我的完整的 html代码了
      <template>
          <div class="user-list">
              <ToolBar>
                  <!--  <el-button type="primary" icon="el-icon-plus" size="small" @click="editUser(false)">添加</el-button>-->
                  <div style="float: right">
                      <el-input
                              placeholder="请输入用户昵称!"
                              size="small"
                              style="width: 140px"
                              v-model="params.username"
      
                              clearable>
                      </el-input>
                      <el-button  type="success" icon="el-icon-search" size="small"></el-button>
                  </div>
              </ToolBar>
              <el-table
                      :data="userList"
                      border
                      ref="table"
                      style="width: 100%">
                  <el-table-column
                          type="index"
                          width="66"
                          label="序号">
                  </el-table-column>
                  <el-table-column
                          prop="id"
                          label="用户id">
                  </el-table-column>
                  <el-table-column
                          prop="username"
                          label="用户昵称">
                  </el-table-column>
                  <el-table-column
                          prop="emaill"
                          label="邮箱">
                  </el-table-column>
                  <el-table-column
                          prop="realname"
                          label="真实姓名">
                  </el-table-column>
                  <el-table-column
                          prop="sex"
                          width="66"
                          label="性别">
                     <!-- <div slot-scope="scope" style="width: 100%;text-align: center">{{ $Config.sex[scope.row.sex] }}</div>-->
                  </el-table-column>
                  <el-table-column
                          prop="state"
                          label="状态">
                  </el-table-column>
                  <el-table-column
                          prop="status"
                          label="用户类型">
                  </el-table-column>
                  <el-table-column
                          label="操作"
                          width="180">
                      <template slot-scope="scope">
                          <el-button @click="resetting(scope.row.id)" type="warning" style="transition: .4s;"  :ref="scope.row.id"  icon="el-icon-refresh" size="small" circle></el-button>
                          <el-button @click="editUser(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
                          <el-button @click="deleteUser(scope.row.id)"  type="danger" icon="el-icon-delete" circle size="small"></el-button>
                          <!--<el-button @click="deleteUser(scope.row.id)" v-else icon="el-icon-check" circle size="small"></el-button>-->
                      </template>
                  </el-table-column>
              </el-table>
              <Paginate
                      api="queryUserList"
                      :params="params"
                      :refresh="refresh"
                      @val-change="changeUserList">      <!--自定义方法使得得到userlist-->
              </Paginate>
      
          </div>
      </template>
      
      <script>
          import ToolBar from '~/components/ToolBar/ToolBar.vue';
          import HelpHint from '~/components/HelpHint/HelpHint.vue';
          import Paginate from '~/components/Pagination/Paginate.vue';
      
          export default {
              data() {
                  return {
                      params: {
                          username: '',
                      },
                      refresh: true,
                      userList: [
                          {id:1,username:'Admin',emaill:'1@qq.com',realname:'张三',sex:'男',state:'正常',status:'超级管理员'}
                      ]
                  }
              },
              components: {
                  ToolBar, HelpHint,Paginate
              },
              methods: {
                  changeUserList(userList){
                      this.userList = userList;
                  }
              }
          }
      </script>
      <style lang="less">
      
      </style>
      
      
      1. 这是我的分页组件
      <!--
      如何使用?
      1.导入并添加components, import ToolBar from '~/components/ToolBar/ToolBar.vue',
      2.绑定你的api、参数和数据处理函数,会自动生成分页
      <Paginate
          api="postList"         提供接口
          :params="params"       实现按需跳转,与后端传值
          :refresh="refresh"      用于搜索
          @val-change="PaginateData"   自定义事件,
          >
      </Paginate>
      3.当你再次改动参数时,执行 refresh=!refresh 即可刷新。用于搜索。
      
      -->
      
      <template>
        <div class="pagination">
          <div class="total">本页共有{{currentDataLength}}条数据</div>
          <!--
          1.@size-change:作用,当每页的数据量变化时,该事件被触发,即:pageSize 改变时
          2.layout="total, sizes, prev, pager, next, jumper":作用,total,意思是显示数据总量;sizes:显示当前页数据量的最大值;
          prev:向前翻页的图标;pager:当前页;next:向后翻页的图标;jumper:跳转到那页
          3.:page-sizes :作用,给定几个每页多少数据
          4. :page-size : 作用,确定当前页数据量初始值
          5. @current-change:作用,当前页数的改变会被触发,即 currentPage 改变时会触发,
          6. :total:作用,确定数据总量
          -->
          <el-pagination
                  @size-change="handleSizeChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  @current-change="change"
                  :total="total">
          </el-pagination>
        </div>
      </template>
      <script>
        export default {
          name: 'Paginate',
          props: {                   /*用来接收父组件的返回的数据*/
            api: String,
            params: Object,
            refresh: Boolean,
          },
          data() {
            return {
              total: 0,                      /*总共多少数据*/
              current: 0,                   /*从第几页开始*/
              currentDataLength: 0,         /*当前页有多少数据*/
              pageSize: 5 ,                 /* 每页多少数据 */
              pageSizes:[5, 10, 15, 20]
            }
          },
          methods: {
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.pageSize = val;        /*当前页数据量变动时,绑定给pageSize,实现实时的更新表格*/
              this.paginate();
            },
            paginate: function () {
              let thisApp = this;
              let params = thisApp.params;
              params.pageSize = thisApp.pageSize
              params.pageCode = thisApp.current;
      
              thisApp.$Api[thisApp.api](params, function (data) {
                thisApp.total = data.total;                               /*接收从后端返回的总记录数*/
                thisApp.currentDataLength = (data.list).length          /*接收从后端返回的数据的长度*/
                thisApp.$emit('val-change', data.list);               /*使用 $emit 触发父组件的自定义事件,将从后端返回的用户数据布置到前端*/
              })
            },
            change: function (page) {    /*改变页数,实现分页*/
              this.current = page;
              this.paginate();
            }
          },
          mounted: function () { /*页面加载的时候运行*/
            this.paginate();
          },
          watch: {        /*监听功能*/
            'refresh': {
              handler: function () {
                this.current = 0;
                this.paginate();
              },
              // 深度观察
              deep: true
            }
          },
      
        }
      </script>
      <style lang="less" scoped>
        .pagination {
          padding: 7px;
          border: 1px solid #ebeef5;
          background: #fff;
          text-align: right;
        }
        .total {
          float: left;
          margin-top: 8px;
          margin-left: 10px;
          font-size: 13px;
          color: #606266;
        }
      </style>
      
    5. 大功告成!!!

    6. 小小收藏,elementui中,分页的参数与事件小结

      1.@size-change:作用,当每页的数据量变化时,该事件被触发,即:pageSize 改变时
      2.layout="total, sizes, prev, pager, next, jumper":作用,total,意思是显示数据总  量;sizes:显示当前页数据量的最大值;
      prev:向前翻页的图标;pager:当前页;next:向后翻页的图标;jumper:跳转到那页
      3.:page-sizes :作用,给定几个每页多少数据
      4. :page-size : 作用,确定当前页数据量初始值
      5. @current-change:作用,当前页数的改变会被触发,即 currentPage 改变时会触发,
      6. :total:作用,确定数据总量
      
    展开全文
  • elementUI 分页组件的使用 - 踩坑篇

    万次阅读 2019-04-04 17:11:08
    elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面:(踩坑一则) 因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页; 但是传统的客户需求还是...

    elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面:(踩坑一则)

    因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页;
    但是传统的客户需求还是完全能够通用和满足的。


    一、分页效果图

    在这里插入图片描述


    二、elementUI 分页组件的使用 - 应用篇

    
    <!-- 分页组件 -->
    <div class="pageturn">
    	<el-pagination
    		background
    		@size-change="pageSizeChange"
    		@current-change="pageCurrentChange"
    		:current-page="pageform.pageNum"
    		pager-count="5"
    		:page-sizes="pageform.pageSizes"
    		:page-size="pageform.pageSize"
    		layout="total, sizes, prev, pager, next, jumper"
    		:total="pageform.total">
    	</el-pagination>
    	<!-- <div style="color:#333;padding:10px 0;">共 {{pageform.pages}} 页 
    		&nbsp;&nbsp; 上一页是第:{{pageform.navigateFirstPage}} 页 
    		&nbsp;&nbsp; 下一页是第:{{pageform.navigateLastPage}} 页 
    	</div> -->
    </div>
    

    三、注意:

    在上图所示返回的data里面,有定义[5条/页]显示规则的数据,这个数据格式是个数字数组。
    为了让现实分页显示&&功能都能够正常,需要前端初始化手动定义设置:默认为后台定义的数字数组的第一个 值,也就是数组第一项5,如下图所示。

    在这里插入图片描述
    即:如上图箭头所示。

    注意:

    再结合下面的代码pageform.pageSize的设置,你就应该可以理解了。
    我一开始没有这么设置,直接导致显示的效果不正常。

    
    export default {
    	name: 'searchMain',
        data() {
            return {
    				// 分页插件		
    				pageform: {
    					total: 200, // 总条目数
    					pages: 5,  // 总页数
    					pageNum: 1, // 当前的页码
    					pageSizes: [5,10,15,20,30,40,50], // select选项设置:条/页
    					pageSize: 5, // 每页显示条目个数
    					navigateFirstPage: 1, // 上一页
    					navigateLastPage: 3, // 下一页
    					lastPage: false, // 是最后一页?
    					firstPage: false, // 是第一页?
    					hasNextPage: true, // 有下一页?
    					hasPreviousPage: true // 有上一页?
    				},	
             }
    	},
    	methods: {
    			/* 分页插件 */
    			// pageSize (每页显示条目个数)改变时会触发 
          		pageSizeChange(val,e,form,jobExpLabel,pageform,searchVal) {
          		    // console.log('每页'+val+'条');
    				this.pageform.pageSize = val;
    				console.log("设置:"+this.pageform.pageSize+"条/页");
    
    				// this.getresume();
    				this.conditionalQueryAxiosFun();
    			},
    			// pageNum (当前页数)改变时会触发 
         		pageCurrentChange(val,e,form,jobExpLabel,pageform,searchVal) {
    				// console.log('当前页:'+ val);
    				this.pageform.pageNum = val;
    				console.log("当前页数:"+this.pageform.pageNum);
    
    				// this.getresume();
    				this.conditionalQueryAxiosFun();
    			},
    	}
    
    // 条件查询 异步请求
    conditionalQueryAxiosFun(e,form,jobExpLabel,pageform,searchVal){
    
    //  · 省略 · 大部分前端页面收集数据&&处理 · 省略 · 不再赘述
    
    		axios.post( serverPath + '/searchResume/',		
    			{
    				"fuzzySearch": this.searchVal, // 搜索文本框 取值
    	
    				// 右侧边栏:条件查询
    				"jobIntention": this.form.jobHot, //房产销售
    				"location": this.form.radioarea, //经开区
    				// 工作经验
    				"startSeniority": jobStart,
    				"endSeniority": jobEnd,
    				// 薪资
    				"startSalaryExp": payStart, // this.form.payLow
    				"endSalaryExp": payEnd, // this.form.payHigh
    				// 教育经历
    				"startEducation": eduStart, // this.form.educationLow
    				"endEducation": eduEnd, // this.form.educationHigh
    				"sex": sexStart,
    				// 求职状态
    				"wantedState": this.form.checkVal,//  [1,2,3]
    			
    			/* 分页组件API对接 */
    			"total": this.pageform.total, // 总条目数
    			'pageNum': this.pageform.pageNum, // 当前页码
    			'pageSizes': this.pageform.pageSizes, // select选项设置:条/页
    			'pageSize': this.pageform.pageSize, // 每页显示条目数
    			"pages": this.pageform.page,  // 总页数
    			"navigateFirstPage": this.pageform.navigateFirstPage, // 上一页
    			"navigateLastPage": this.pageform.navigateLastPage, // 下一页
    			"lastPage": false, // 是最后一页?
    			"firstPage": false, // 是第一页?
    			"hasNextPage": true, // 有下一页?
    			"hasPreviousPage": true // 有上一页?
    			},
    			{
    				headers: {
    					'Content-Type':'application/json',
    					'Authorization': key
    				}
    			},
    		)
    		.then(function (response) {
    				if (response.data.code == "2050"){
    					/*
    						this.$message({
    							type: 'warning',
    							message: response.data.message
    						}); 
    					*/
    						this.$alert(response.data.message, '提示', {
    							confirmButtonText: '确定',
    							type: 'warning',
    							callback: action => {
    								this.$message({
    									type: 'warning',
    									message: '更换查询条件试试'
    								});
    							}
    						});   
    						$("#cardbox").hide();
    						$(".pageturn").hide();
    				}	
    				if (response.data.code == "200"){
    						this.$message({
    							type: 'warning',
    							message: response.data.message
    						});       
    						$("#cardbox").show();
    						$(".pageturn").show();
    	
    						this.resumes = response.data.data.resumes;
    						/*  同步初始化渲染:分页组件渲染 */ 
    						// 获取分页数据
    						this.pageInfo = response.data.data.pageInfo; 
    						// 获取分页数据之后,立刻渲染
    						this.pageform.pageSizes = this.pageInfo.pageSizes;
    						this.pageform.pageSize = this.pageInfo.pageSize;
    						this.pageform.pageNum = this.pageInfo.pageNum;
    						this.pageform.total = this.pageInfo.total;
    						this.pageform.pages = this.pageInfo.pages;
    				}
    			
    				localStorage.setItem("token",response.headers.authorization); // token 复写本地 localStorage
    				
    		}.bind(this))
    		.catch(function (error) {
    			
    			// this.$message({
    			// 	type: 'success',
    			// 	message: "请求失败"+error
    			// });
    				
    		});	
    	}
    
    
    }
    

    四、将服务端返回的data数据进行同步初始化渲染

    结合上面的代码,你会发现,最后一步就是:页面需要将服务端返回的data数据进行同步初始化渲染。


    五、作者自留·备注:

    具体文件代码,参考对应项目文件:src/component/search/searchMain.vue文件


    以上就是关于“ elementUI 分页组件的使用 - 踩坑篇 ” 的全部内容。

    展开全文
  • elementui分页

    2020-08-31 14:45:50
    <div class="block" style="margin-top: 25px;text-align: center;height: 2px;"> <el-pagination :page-size="PAgesize" layout="prev, pager, next" :total="taol" @current-change=...
  • 1.在后端数据不进行分页时,前端分页的办法: 第一种情况:需要分页的数据是表格时,使用elementui分页组件,并对table绑定的 :data进行计算 具体代码如下所示: ...
  • 博客页面分页,前端element的分页组件很容易实现 前端 <el-pagination style="text-align: center" background //当前页面改变时执行的函数 @current-change="handCurrentChange" //当前页数 :current-...
  • 使用elementui分页和表格时,表格展示的数据是全部,不受分页控制。因为是按老师写的来的,但是自己的就是不受控制,于是在表格引入数据的地方加了句:data="lists.slice((currentPage-1)pageSize,...
  • springboot使用elementUI分页对数据进行crud,完美的crud
  • <!--分页 start--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="[5, ...
  • elementUI 分页组件(Pagination)无法传值的问题 1.问题原因:在我使用Pagination组件时将组件封装后注册到父组件上面时,父组件异步传值, 一开始父组件没有值,是空的对象,异步操作结束之后,父组件值更新,但是...
  • ElementUI 分页

    2021-01-26 13:37:00
    一、概述 ...本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination分页,使用Pagination 快速完成分页功能 最终效果 二、完整代码 test....
  • elementUI 分页如何使用

    千次阅读 2018-08-22 10:52:53
    -- 分页 --&gt; &lt;div class="block"&gt; &lt;el-pagination layout="prev, pager, next" :total="total" :current-page.sync="currentPage" :page-...
  • elementUI分页bug

    2019-02-15 18:09:14
    触发前提 data上创建一个属性currentPage 点击触发查询方法searchData时,传一个参数进去,其他情况...分页组件上必须有sync :current-page.sync="currentPage" 重点就是searchData里的写法,见图 ...
  • elementUI分页

    2020-01-02 22:45:08
    后台是有未分页的所有的数据的 当每页数据量以及当前页发生改变时,才进行重新分页 前台在一次请求只需要返回给后台一个页面的数据而已 根据这三点你就可以得到得到返回给后台每页的数据的begin、end索引在总数据中...
  • vue +elementUI 分页功能入的坑(数据不能渲染上表格)注意坑来了!!! 今天写Vue项目遇到表格分页问题,于是就想到elementUI组件有分页功能。 <div class="block"> <span class="demonstration">完整...
  • 使用elementUI提供的表格组件和分页组件 表格组件 序号那一列将type设置为index,可以让这一列内容按照索引排序, 索引+1即为第几条数据。 可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将...
  • elementUI 分页刷新bug

    2020-08-22 11:14:51
    如果你并不是在第一页进行数据搜索分页,那么当你返回当前页,页面数据为离开时的数据,但页码显示为第一页,此时你再次点击刚才的页码,两页数据为一致,出现页码数据重复。 解决办法:用session或local存储下来 ...
  • ElementUI分页组件的基本使用

    千次阅读 2018-12-07 22:59:14
    使用ElementUI分页组件 1 官网:http://element-cn.eleme.io/#/zh-CN 2 使用步骤: 第一步:创建vue的基本页面 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt;...
  • vue+elementUI项目开发时分页删除最后一页没有跳转回上一页 删除时重新计算剩余分页数据 const totalPage = Math.ceil((this.total -1 ) / this.params.pageSize) // 总页数 this.params.pageNum = this.params....
  • 1.通过handleSizeChange函数监听当前页展示的数据条数是多少,...3.把监听到的数据传给querInfo,然后向服务器发送请求,返回querInfo中请求的params,然后在分页区中把current-page,page-size都绑定querInfo中相对应.
  • 主要为大家详细介绍了Vue+ElementUI table实现表格分页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 分页分为前端分页和后端分页,前端分页是先获取所有数据前端再来分页。性能不好 后端分页就是把数据传给后端,后端返回当前页相应的数据 后端分页: 在表格</el-table>后面加上分页代码,如果是其他的比如列表...
  • ElementUI 分页组件二次封装

    千次阅读 2018-09-28 19:23:45
    改善了调用方式,仅需传入分页对象与绑定查询事件。 改为通过 model 更新分页对象。 调用方式: <template> <paging-query :pager="pager" @change="getItemList"/> </template> <script>...
  • 这个问题出现在详情页返回列表页的时候,回显之前的历史记录的时候会碰到加载了正确页面的数据,但是分页显示的却是第一页,这是因为分页在请求数据之前就已经加载了,但是此时的total总页数是0,所以分页一直显示第...
  • 我们返回当前页面取得总条数totalNum的之前,element-ui的分页组件已经在页面加载完毕,当时的totalNum绑定的是data里面初始化的数据0,所以当总条数为0的时候,分页组件的页码默认为1。并且当totalNum在created生命...
  • 当数据量过多时,使用分页请求数据。 设置分页的页数自动回到第一页。 例: <div class="pagination"> <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage" @...
  • ElementUI 分页插件国际化

    千次阅读 2019-09-06 14:52:53
    注意:比如这里需要国际化分页,那么在zh.js和en.js必须按照element源码中语言包来按规定翻译, 在'element-ui/lib/locale中可以查看zh-CN,可以看到分页的是  el:{  pagination:{  goto:'前往',  pagesize:'条...
  • *elementUi分页删除最后一页数据不刷新回到前一页的情况 *实现方法: 可以监听数据表total总数的变化, watch: { total() { if ( this.total === (this.currentPage - 1) * this.listQuery.limit && this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,916
精华内容 1,566
关键字:

elementui分页