当前位置:   article > 正文

elementui中的表格实现无限滚动_v-el-table-infinite-scroll

v-el-table-infinite-scroll
  1. <template>
  2. <el-table v-el-table-infinite-scroll="load" :data="data" :infinite-scroll-disabled="disabled" height="530px">
  3. <el-table-column type="deviceName" />
  4. <el-table-column prop="userRealName" label="date" />
  5. <el-table-column prop="deviceCode" label="name" />
  6. </el-table>
  7. </template>
  8. <script>
  9. export default {
  10. directives: {
  11. "infinite-scroll": InfiniteScroll,
  12. },
  13. data() {
  14. return {
  15. data: [],
  16. total: 5,
  17. disabled: false,
  18. par: {
  19. recordId: '',
  20. firstIndex: '1', //第几页
  21. pageSize: '10' //一页有多少数据
  22. },
  23. };
  24. },
  25. mounted() {
  26. this.listEquipment()
  27. },
  28. methods: {
  29. load() {
  30. if (!this.disabled) {
  31. this.par.firstIndex++
  32. if (this.data.length <= this.total) {
  33. this.listEquipment()
  34. } else {
  35. this.disabled = true
  36. }
  37. } else {
  38. return
  39. }
  40. },
  41. async listEquipment() {
  42. try {
  43. let {
  44. data: res
  45. } = await this.$http.get('接口', this.par)
  46. console.log("设备列表", res);
  47. this.data = this.data.concat(res.data.list)
  48. this.total = res.data.count //总数据个数
  49. console.log("this.par.firstIndex", this.par.firstIndex);
  50. } catch (err) {
  51. console.log(err);
  52. }
  53. },
  54. },
  55. };
  56. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/193920?site
推荐阅读