element ui中 el-table表格的无线滚动 简化版

需要在el-tablel里实现滚动到底部加载更多数据 或者用于优化前端

<template>

<el-table

  border

  height="400"

  :data="tableData2"

  v-load-more.expand="{

    func: loadmore,

    target: '.fssss .el-table__body-wrapper',

    delay: 300,

  }"

  class="fssss"

>

  <el-table-column type="selection" :reserve-selection="true" width="55">

  </el-table-column>

  <el-table-column prop="date" label="日期" width="180"></el-table-column>

  <div v-show="visibleshow" slot="append" style="text-align: center">

    滚动到底部加载更多

  </div>

</el-table>

</template> <script> const debounce = function (func, delay) { let timer = null; return function () { if (timer) clearTimeout(timer); timer = null; let self = this; let args = arguments; timer = setTimeout(() => { func.apply(self, args); }, delay); }; }; export default { directives: { "load-more": { bind(el, binding, vnode) { const { expand } = binding.modifiers; console.log(el, binding, vnode); // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上 if (expand) { /** * target 目标DOM节点的类名 * distance 减少触发加载的距离阈值，单位为px * func 触发的方法 * delay 防抖时延，单位为ms * load-more-disabled 是否禁用无限加载 */ let { target, distance = 10, func, delay = 200 } = binding.value; if (typeof target !== "string") return; let targetEl = el.querySelector(target); if (!targetEl) { console.log("找不到容器"); return; } binding.handler = debounce(function () { const { scrollTop, scrollHeight, clientHeight } = targetEl; let disabled = el.getAttribute("load-more-disabled"); disabled = vnode[disabled] || disabled; if (scrollHeight <= scrollTop + clientHeight + distance) { if (disabled) return; func && func(); } }, delay); console.log(binding.handler); targetEl.addEventListener("scroll", binding.handler); } else { binding.handler = helper.debounce(function () { const { scrollTop, scrollHeight, clientHeight } = el; if (scrollHeight === scrollTop + clientHeight) { binding.value && binding.value(); } }, 200); el.addEventListener("scroll", binding.handler); } }, unbind(el, binding) { let { arg } = binding; // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上 if (arg === "expand") { /** * target 目标DOM节点的类名 * offset 触发加载的距离阈值，单位为px * method 触发的方法 * delay 防抖时延，单位为ms */ const { target } = binding.value; if (typeof target !== "string") return; let targetEl = el.querySelector(target); targetEl && targetEl.removeEventListener("scroll", binding.handler); targetEl = null; } else { el.removeEventListener("scroll", binding.handler); el = null; } }, }, }, data() { return { visibleCount: 10, visibleindex: 1, visibleshow: true, tableData: [ { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, ], tableData2: [ { id: "234", date: "2016-06-01" }, { id: "34", date: "2016-06-01" }, { id: "24", date: "2016-06-01" }, { id: "23242", date: "2016-06-01" }, { id: "23243", date: "2016-06-01" }, { id: "23244", date: "2016-06-01" }, { id: "23245", date: "2016-06-01" }, { id: "23246", date: "2016-06-01" }, { id: "23247", date: "2016-06-01" }, { id: "23248", date: "2016-06-01" }, ], }; }, created() {}, methods: { loadmore() { if (this.tableData.length != this.tableData2.length) { this.visibleindex += 1; this.tableData2 = [ ...this.tableData.slice(0, this.visibleindex * this.visibleCount), ]; if (this.tableData.length === this.tableData2.length) { console.log("没有更多数据"); this.visibleshow = false; } } }, }, }; </script>

主要是大佬的代码 自己进行了一下修改 感谢大佬的代码支持

element-ui的el-table表格实现无限滚动，使用自带的infinite-scroll_elementui infinitescroll table-CSDN博客