el-table的虚拟滚动

weixin_53545517

已于 2023-03-29 15:35:59 修改

阅读量774

点赞数 1

文章标签： vue.js javascript 前端

于 2023-03-29 15:34:49 首次发布

本文链接：https://blog.csdn.net/weixin_53545517/article/details/129838155

版权

文章详细介绍了如何在Vue项目中使用el-table-infinite-scroll插件来实现表格的无限滚动加载功能。首先通过npm安装插件，然后在main.js中全局引用，或者在组件内部局部引用。接着在模板中配置el-table属性并绑定加载方法，当表格滚动到底部时自动加载更多数据。

摘要由CSDN通过智能技术生成

步骤

1. 前端安装“save el-table-infinite-scrol”

npm install --save el-table-infinite-scroll
2. 全局引用，在main.js中引用

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);
3. 局部引用

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>
4. 使用 

 <el-table
        class="elTable"
        border
        height="100%"
        :data="tableData"
        :span-method="spanMethod"
        :cell-class-name="cellClassName"
        :cell-style="{ borderColor: '#DBDBDB' }"
        :header-cell-style="{ borderColor: '#DBDBDB' }"
        v-loading="loading"
        v-el-table-infinite-scroll="loadTable"
      >
 
</el-table>
 
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  name: "PlatForm",
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll
  },
  data() {
    return {
       test:"test"
    };
  },
  methods: {
    // 加载table
    loadTable() {
      if (this.tableData.length < this.allData.length) {
        const data = this.tableData.concat(
          this.allData.slice(this.tableData.length, this.tableData.length + this.count)
        );
        this.$set(this, "tableData", data);
      }
    },
  }
   
};