【无标题】el-table实现虚拟列表

最新推荐文章于 2025-04-07 22:32:42 发布

苹果函数

最新推荐文章于 2025-04-07 22:32:42 发布

阅读量2.7k

点赞数

分类专栏： Vue原理与实战文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_50077864/article/details/128043133

版权

Vue原理与实战专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element-UI组件库创建一个滚动加载数据的表格。首先，在main.js中定义一个滚动加载指令，然后设置一个包含数据的表格，并在methods中定义加载更多数据的函数，通过setTimeout模拟延迟加载。当表格接近底部时，会触发loadMore方法，加载更多数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用vue做项目时遇到用element-ui实现滚动的table,可以用以下的方法：

一、首先在main.js文件中添加指令

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    selectWrap.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
        binding.value();
      }
    })
  }
})

二、再用element-ui准备一个table表格

<el-table :data="tableData" height="80%" v-loadmore="loadMore" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(10,88,128,0.2)" class="table">
          <el-table-column label="排名" type="index" width="80px"> </el-table-column>
          <el-table-column label="企业名称" prop="enterpriseName" width="160px"> </el-table-column>
          <el-table-column label="企业地址" prop="address" width="400px"> </el-table-column>
          <el-table-column label="入驻时间" prop="time" show-overflow-tooltip> </el-table-column>
</el-table>

三、使用setTimeOut模拟数据返回

export default {
  name: 'EnterpriseEnter',
  props: {},
  data() {
    return {
      loadingTable: false,//给table加一个loading
      tableData: [],//table绑定的数据
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getStaffTableData();
  },
  methods: {
      getStaffTableData() {
      const data = new Array(10).fill(0).map((_, index) => (
        {
          enterpriseName: (index % 2 === 0) ? 'company' : 'common',
          address: '广东省深圳市南山区创新街道创新大厦A幢15栋1503号',
          time: '2022-06-09',
        }
      ));
      this.tableData = data;
    },
  },
}
</script>

四、添加表格滚动事件

 methods: {
    // 表格滚动加载事件
    loadMore() {
      this.page.pageIndex++;
      this.loadingTable = true;
      setTimeout(() => {
        const data = new Array(10).fill(0).map((_, index) => (
          {
            enterpriseName: (index % 2 === 0) ? 'company' : 'common',
            address: '广东省深圳市南山区创新街道创新大厦A幢15栋1503号',
            time: '2022-06-09',
          }
        ));
        this.tableData = this.tableData.concat(data);
        this.loadingTable = false;
      }, 1000);
    },
  },

效果如图：
在这里插入图片描述