精华内容
下载资源
问答
  • 封装element分页组件

    2021-03-05 10:08:34
    element-ui 中分页封装成公共组件 描述: admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件 原因分析: 提示:这里填写问题的分析: 例如:Handler 发送消息有两种方式,分别是 ...

    项目场景:

    将 element-ui 中分页封装成公共组件

    描述:

    admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件

    <!--封装组件  vue页面-->
    <!-- 
    1. background	是否为分页按钮添加背景色 接受boolean类型
    2. current-page	 当前页数,支持 .sync 修饰符  接受类型 number
    3. page-size	每页显示条目个数,支持 .sync 修饰符    number
    4. page-sizes	每页显示个数选择器的选项设置	number[][10, 20, 30, 40, 50, 100]
    5. total	总条目数	number
    6. size-change	pageSize 改变时会触发
    7. current-change	currentPage 改变时会触发
    
    
    -->
    <template>
      <div>
        <el-pagination
          :background="background"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :layout="layout"
          :page-sizes="pageSizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
    <script>
    export default {
      name: 'Pagination',
      props: {
        total: {
          required: true,
          type: Number
        },
        page: {
          type: Number,
          default: 1
        },
        limit: {
          type: Number,
          default: 20
        },
        pageSizes: {
          type: Array,
          default() {
            return [10, 20, 30, 50]
          }
        },
        layout: {
          type: String,
          default: 'total, sizes, prev, pager, next, jumper'
        },
        background: {
          type: Boolean,
          default: true
        },
      },
      computed: {
        currentPage: {
          get() {
            return this.page
          },
          set(val) {
            this.$emit('update:page', val)
          }
        },
        pageSize: {
          get() {
            return this.limit
          },
          set(val) {
            this.$emit('update:limit', val)
          }
        }
      },
      methods: {
        handleSizeChange(val) {
          //this.$emit('pagination', { page: this.currentPage, limit: val })
          this.$emit('pagination')
        },
        handleCurrentChange(val) {
          //this.$emit('pagination', { page: val, limit: this.pageSize })
          this.$emit('pagination')
        }
      }
    }
    </script>
    
    <!-- main.js引用 !-->
    import Pagination from "@/components/Pagination";
    // 全局组件挂载
    Vue.component('Pagination', Pagination)
    
    <!-- 父页面引用 !-->
    <template>
    <pagination
    	v-show="total > 0"
    	:total="total"
    	:page.sync="queryParams.pageNum"
    	:limit.sync="queryParams.pageSize"
    	@pagination="getList"
    />
    </template>
    <script>
    export default {
      data() {
        return {
        	total: 0,
         	queryParams: {
         		pageNum:1,
    			pageSize:10
         	},
        }
      },
      mounted(){
      	this.getList()
      },
      methods:{
      	getList(){
      		//表格接口
      	}
      }
    </script>
    

    展开全文
  • element分页组件的使用

    千次阅读 2020-07-21 11:09:19
    数据越来越多,需要我们来进行分页的功能,所以今天小欢呢来为大家说一下简单分页的实现,代码和思路呢纯属是个人的想法,大家有什么更好的也可以对我提出来,我会吸取学习的。 <el-pagination background ...

    数据越来越多,需要我们来进行分页的功能,所以今天小欢呢来为大家说一下简单分页的实现,代码和思路呢纯属是个人的想法,大家有什么更好的也可以对我提出来,我会吸取学习的。

    <el-pagination
            background
            layout="prev, pager, next, jumper"
            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currpage"
            :page-size="pageSize"
            :total="total"
          ></el-pagination>
    

    里面具体的一些属性,大家可以查看官网的api介绍
    官网地址
    https://element.eleme.io/#/zh-CN/component/pagination

    data数据(一般我们需要动态从接口获取后台数据)

    data() {
        return {
          tableData: [],
          pageSize: 10, //每一页的数据
          currpage: 1, //当前页
          total: 0, //所有的数据
          listData: [] //数组用来存放临时数据---当前页的数据存放
        };
      },
    

    方法

     methods: {
        handleSizeChange(val) {
          this.pageSize = val;
          this.userData();
        },
        handleCurrentChange(val) {
          this.currpage = val;
          this.userData();
        },
    

    这时候一个简单的分页器就实现了,如果效果小伙伴们想的不太一样,那么就需要你再发挥你的思考然后改一下代码

    最后说一句题外话,肯定累了,送一句激励话:当你喊累想停止的时候,看看那些依然爬着含泪前行的人。

    展开全文
  • vue+Element分页组件

    千次阅读 2019-04-30 14:49:57
    Element自带分页组件的使用 <el-table ref="singleTable" :data="tableData" highlight-current-row border @current-change="handleCurrentChange" ...

    Element自带分页组件的使用

     <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                border
                @current-change="handleCurrentChange"
                style="width: 100%">
                <el-table-column
                  property="id"
                  label="ID"
                  width="199"
                  show:"false"
                  align="center">
                </el-table-column>
                <el-table-column
                  property="userName"
                  label="姓名"
                  width="100"
                  align="center">
                </el-table-column>
                <el-table-column
                  property="comNum"
                  label="工号"
                  width="100"
                  align="center">
                </el-table-column>

     </el-table>

    <el-pagination
                  background
                  layout="prev, pager, next,total"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  :total="totalPage"
                  @current-change="currentChange">
    </el-pagination>


    vue:

    new Vue({
            el:'#user',
            data: {
                tableData: [],
                currentRow: null,    
                pageSize:10,
                currentPage:1,
                totalPage:0,
           },

          created() { // 当 vm 实例 的 data 和 methods 初始化完毕后,vm实例会自动执行created 这个生命周期函数
              this.getAllUserList();
          },

          methods:{
              getAllUserList(){//获取员工
                  var url =  getAllUserByVaildUrl;//所有有效的
                  this.$http.get(url,{
                        params: {
                            "page":this.currentPage,
                        }
                    }).then(result => {
                    // 注意: 通过 $http 获取到的数据,都在 result.body 中放着
                    var result = result.body
                    if (result.status = 200) {
                      // 成功了
                        if(result==null||result==""){
                            this.tableData = []
                        }else{
                            var pageResult = JSON.parse(result);
                            this.tableData = pageResult.list;//将json字符串转化为json对象
                            this.currentPage = pageResult.currentPage;
                            this.totalPage = pageResult.total;
                        }
                    } else {
                      // 失败了
                      alert('获取数据失败!')
                    }
                  })
              },

             currentChange(val){//页码改变时触发
                    this.currentPage=val;
                    this.getAllUserList();
                },

    });


    SpringBoot后端代码

       @Autowired
        private SalaryUserMapper salaryUserMapper;
        /**
         * 获取所有有效员工,分页展示
         * @return
         * author:cgx
         * 下午4:57:16
         */
        @RequestMapping("/getAllUserByVaild")
        @ResponseBody
        public SalaryPages getAllUserByVaild(HttpServletRequest request){
            String currentPage = request.getParameter("page");
            System.out.println("currentPage="+currentPage);
            int cPage = Integer.parseInt(currentPage);
            int startPage = (cPage-1)*10;
            Map<String,Integer> map = new HashMap<String, Integer>();
            map.put("startPage", startPage);
            map.put("pageSize", 10);
            
            List<SalaryUserWithCorp> users = salaryUserMapper.selectAllUserByVaild(map);
            
            int total = salaryUserMapper.selectTotalUserByVaild();
            SalaryPages<SalaryUserWithCorp> userPages = new SalaryPages<SalaryUserWithCorp>();
            userPages.setList(users);
            userPages.setCurrentPage(cPage);
            userPages.setTotal(total);
            return userPages;
        }


    SalaryUserMapper 接口类

     List<SalaryUserWithCorp> selectAllUserByVaild(Map<String,Integer> map);//有效的
        
     int selectTotalUserByVaild();//有效的总数


    SalaryUserMapper.xml

    <!-- 分页查询有效的 -->
      <select id="selectAllUserByVaild" parameterType="java.util.Map" resultMap="BaseResultMap1">
          select * from salary_user where VALIDITY=1 order by ID desc  LIMIT #{startPage},#{pageSize}
      </select>

    <!-- 查询有效的总数 -->
      <select id="selectTotalUserByVaild" resultType="java.lang.Integer">
          select count(id) from salary_user where VALIDITY=1
      </select>

    展开全文
  • element 分页组件遇到的问题

    千次阅读 2018-09-10 17:17:22
    先操作element分页,切换到第二页...从代码中强制将current-page强制设置为1(即重新查询数据,并将当前页重置为第1页)此时画面显示是对的,分页组件已经将第1页的页码数字激活了然后点击第2页数字,进行换页...

    先操作element分页,切换到第二页,然后操作。

    从代码中强制将current-page强制设置为1

    (即重新查询数据,并将当前页重置为第1页)此时画面显示是对的,

    分页组件已经将第1页的页码数字激活了然后点击第2页数字,进行换页画面显示也是对的,第2页数字变成激活状态,

    但是此时竟然无法触发current-change事件

    原因

    使用this.pagination.currentPage = val,强制改变分页页数以及样式,没法完全重置分页组件

    解决方案

    data里面初始化paginationShow为true

    <el-pagination v-if="paginationShow"
    @current-change="handleCurrentChange"
    :current-page.sync="pagination.currentPage"
    :page-size="pagination.size"
    layout="total, prev, pager, next, jumper"
    :total="pagination.total">
    </el-pagination>

    然后使用v-if强制刷新组件即可,组件声明改成

    search () {
        this.paginationShow = false
        this.handleCurrentChange(1)
        this.$nextTick(function () {
            this.paginationShow = true;
        })
    },

    paginationShow = true,重新显示分页,必须放到$nextTick,画面刷新完毕后,不然无效果

    handleCurrentChange(val) {
        let _this = this;
        _this.pagination.currentPage = val;
    }
    展开全文
  • vue使用element分页组件

    2020-12-14 10:32:25
    vue使用element分页组件 2020/12/14 <div v-if="detail.list && detail.list.length > 0"> <div> <div @click="ClickNews(index)" :class=" xiao_xuan == index ? 'news-contsin_...
  • vue+element分页组件封装成公共组件

    千次阅读 2020-04-07 11:15:30
    1.首先定义一个分页组件 <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :tota...
  • 1 分页组件初步介绍 分页组件最主要的参数有三个 current-page 当前页数,也就是当前的页面的页码,这是刷新后仍在当前页的关键参数 page-size 每页显示条目个数,注意别和 page-size 搞混 total 总条目数 就是所有...
  • ``` background layout="prev, pager, next" :total="1000"> ``` ![图片说明](https://img-ask.csdn.net/upload/201909/11/1568217574_467214.png) 在F12里给ul元素设置 ``` ...
  • Vue+Element分页组件

    2021-09-02 08:18:32
    components下封装一个分页组件:PageCard.vue <template> <div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(pageData....
  • page-size:每页的条数 current-page:当前的页数 page-sizes:每页显示个数选择器的选项设置 @size-change:每页条数 pageSize发生改变时触发 @current-change:当前页 <el-pagination @size-change=...
  • 基于vue+elementUI开发的分页组件,后端项目配置使用PageHelper,前端配合使用此组件。
  • 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页。 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的...
  • 1 就是在搜索过后的当前页数据变化了,原本的分页当前页并不会改变,这就会遇见一个问题,首次展示停留在第5页,搜索过后的数据并没有5页,不论前台分页或后台分页,页面都会展示:暂无数据! 但其实是有数据的,...
  • 组件: <template> <div class="tablePage"> <!-- hide-on-single-page="true" 只有1页的时候分页是否隐藏 --> <el-pagination background @size-change="handleSizeChange" @current-...
  • Iview Page组件页码属性用:current.sync Element-ui Pagination组件页码属性用:current-page.sync
  • 修改element分页组件的样式 这里使用穿透修改 格式: 外层 >>> 第三方组件 { 样式 } Scss格式: /deep/ 第三方组件 { 样式 } /* 组件样式 */ .fenye >>> .el-pager li { background-color: #...
  •  // this.currentPage当前页 this.pageParams.size 每页显示多少 :page-sizes="[10,20,30,50]" 分页大小 return item }) ; this.tableData = res.data.data.list; 只需要在获取数据函数里面动态添加属性就OK了。 ...
  • element分页组件控制翻页

    千次阅读 2019-11-14 18:31:02
    分页组件的current-page可以通过.sync修饰符实现双向绑定当前页码,分页组件的current-change可以配置页码变化后回调,此时分页组件的页码current-page已经改变了,并且呈现在UI上。根据提示框的操...
  • 1.前言在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量...但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会...
  • <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10...
  • 主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 写了一个很简单的分页组件,但是放到页面页面上不能用,点击页面标签页面上一点效果都没有,也没有报错,值都传过去了,也可以打印出来,大家帮忙看看哪里出错了:current-page="currentPage":page-size="pagesize...
  • Element UI 的分页组件

    千次阅读 2020-05-05 20:49:02
    分页组件 <el-pagination> 1、total:设置分页数据的总个数。 2、page-size:设置每页的数据个数。(默认值:10) 3、page-count:设置分页的页数。 设置分页可以有两种方案: (1)设置total和page-...
  • 写管理后台,分页组件必不可少,提取一个分页公共组件,便于全局调用。 在这个组件中把当前页、每页条数、每页条数选项、总条目数、组件布局、页码按钮的数量 都写成可通过props接收从页面传进来的参数,同时每个...
  • vue element-ui之分页组件的封装

    万次阅读 2019-05-21 22:54:49
    为什么要封装分页组件分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载、图片分批次加载等,都会用到分页组件。 这里以表格为例,通常我们写一个分页展示的...
  • element分页当数据少于一页时不显示分页组件
  • 由于element官网的分页器有一些缺陷导致不够个性化定制,特此对其组件进行二次封装。 一、分页器是什么? 浏览文章会有很多的页码,就需要分页来实现,因为不可能把所有的页码放在文章列表的下面。这时候我们可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,818
精华内容 4,727
关键字:

element分页组件