el-table 实现下拉加载

news/2024/7/10 2:43:34 标签: vue, vue.js, javascript

1、npm install --save el-table-infinite-scroll

2、全局

        import elTableInfiniteScroll from 'el-table-infinite-scroll'; 
        Vue.use(elTableInfiniteScroll);

3、局部组件

import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}

4、使用

<el-table @select="onTableSelect" :infinite-scroll-immediate="false" :v-el-table-infinite-scroll="load" row-key="id" ref="multipleTableAll" @cell-click="clickTable"  @expand-change="changeExpand" height="100%" :data="tableData" :header-cell-style="tableHeaderColor_G" @selection-change="handleSelectionChange">
...
</el-table>

// :infinite-scroll-immediate="false" true为未铺满立即加载,false不加载 与 :v-el-table-infinite-scroll="load" 
//其中load为重复加载page++ 内容
// infinite-scroll-distance="'50px'" 距离多长触发加载

 <div class="alertBox">
        <el-alert v-show="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon />
        <el-alert v-show="isMore" title="没有更多啦!" type="warning" center show-icon />
  </div>
// 可定位到tableBox底部,加载中/全部加载完成之后提示

5、js的load内容

javascript">import elTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
     directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data(){
        return{
              page: 1,
              pageSize: 10,
              count: 0,
              tableData: [],
              isflag: false,
              isMore: false,
        }
    },
    methods:{
        async load(){

      let nowTime = new Date().getTime()
      let diffTime = (nowTime - this.lastTime) / 1000
      if (diffTime > 1) { //添加时间戳 防止多次触发
        if (this.tableData.length < this.count) {  //目前tableData数小于count可再次触发
          this.page++
          this.isMore = false
          this.isflag = true
          if (this.isflag) {
            let params = {
              page: this.page,
              pageSize: this.pageSize
            }
            let data = await this.$api.table.list(params)
            this.isflag = false
            if (data) {
              let arr = data.data.list || []
              this.tableData = _.concat(this.tableData, arr)
            }
          }
        } else {
          this.isMore = true
        }
      }
      this.lastTime = nowTime
        }

    }

}


http://www.niftyadmin.cn/n/1318594.html

相关文章

此类目的是防治序列化Json字符串时的循环引用问题-------最好解决方案

using Newtonsoft.Json;using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace AccpStudentMIS{ //此类目的是防治序列化Json字符串时的循环引用问题 //此类为Object类的扩展方法&#xff0c;需要引用Newtonsoft.Json.dll类 /…

git拉去远程所有分支内容

远程项目分支过多&#xff0c;本地使用git branch只展示master 1、git clone xx 使用git branch只能看到拉去的master分支 使用 git branch -a 可查看所有 2、 git branch -r | grep -v \-> | while read remote; do git branch --track "${remote#origin/}" &…

欣赏的价值——一个小故事

第一次参加家长会&#xff0c;幼儿园的老师说&#xff1a;"您的儿子有多动症&#xff0c;在板凳上连三分钟都坐不了&#xff0c;你最好带他去医院看一看。"  回家的路上&#xff0c;儿子问她老师都说了些什么&#xff0c;她鼻子一酸&#xff0c;差点流下泪来。因为…

(转载)使用JavaScript操作表单

&#xff08;转载&#xff09;http://www.blogjava.net/junglesong/archive/2008/03/02/183263.html使用JavaScript操作表单 获取表单的引用 在开始对表单进行编程前&#xff0c;必须先获取表单<form>的引用.有以下方法可以来完成这一操作。1)采用典型的DOM树中的定位元素…

vue 前端下载模板信息

后端返回文件流 前端进行下载 记得请求接口一定要加一个 responseType: blob export function ImportTemplateDownload() {return request({url: /export/download/template,method: get,responseType: blob}) } console.log(返回要下载的文件, res)try {let url window.UR…

《有效辅导》笔记

前言&#xff1a;学习目标 1.运用辅导模型 2.有效辅导策略 3.提高动机和技能 4.掌握辅导时机 5.为被辅导和自已制定计划 一.管理者面对的挑战 作为一个管理者&#xff0c;在工作中面对的挑战 1.选拔人才 2.明确要求 3.激励员工 4.培养员工 作为一个管理者&#xff0c;该做哪些&…

VUE前端使用exceljs导出table以及echart图 生成excel文件

最近项目新增一个需求&#xff1a;导出部分列表数据(较少)以及生成的echart图放到一个excel文件中&#xff0c;全部需要在前端完成 exceljs 文档地址 1、安装 //安装 npm install file-saver --save //保存文件使用 npm install exceljs --save 2、引入 //组件中引…

toFixed问题及解决方法

一. toFixed问题 发现在chrome里面0.725.toFixed() 0.72&#xff0c;在IE下是0.73。 二. 网上大牛解决方法 网上大牛重写Number的toFixed方法。 网址&#xff1a;http://stackoverflow.com/questions/10470810/javascript-tofixed-bug-in-ie6 Number.prototype.toFixed f…