美文网首页
el-table下拉加载更多

el-table下拉加载更多

作者: 祭孑 | 来源:发表于2020-01-02 16:39 被阅读0次

table中有很多条数据,但又不想用分页的方式获取,可以通过下拉触发事件,加载更多数据

<el-table :data="tableData"  border max-height=""500" ref="table">
  <el-table-column type="index"></el-table-column>
  <el-table-column label="短信内容" prop="templateNo" width="120"></el-table-column>
  <el-table-column label="短信内容" prop="template"></el-table-column>
</el-table>

max-height必须要设置

export default {
  data () {
    return {
      tableData: [],
      size: 10,
      total: null,
      totalPage: null,
      currentPage:1
    }
  },
  created () {
    this.getSmsTemplateList({params: '******' }).then(res => {
        if (res.data.code == '200') {
          this.tableTata = res.data.data
          this.total = res.data.total
          this.totalPage = Math.ceil(this.total / this.size)
        }
      })
    },
   mounted () {
     let _this = this
     let dom = document.querySelector('.el-table__body-wrapper')
     dom.addEventListener('scroll', function() {
        const scrollD = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollD <= 0) {
           if (_this.currentPage  < _this.totalPage) {
              _this.currentPage++
              _this.getSmsTemplateList({params: '*****').then(res => {
                 if (res.data.code == '200') {
                     Array.prototype.push.apply(_this.tableData, res.data.data)
                 }
              })
           } 
        }
    })
  },
  methods: {
    getSmsTemplateList () {}
  }
}

相关文章

网友评论

      本文标题:el-table下拉加载更多

      本文链接:https://www.haomeiwen.com/subject/uasooctx.html