vue自定义指令：v-loadmore 实现表格滚动到底部加载下一页【附源码】

一、效果

二、指令的封装

• el：指令绑定到的元素，可以用来操作DOM，或者获取当前DOM的子级

• binding：一个对象，包括了指令的参数，其中重要的参数有：

  1. arg：传递给指令的参数，例如在v-loadmore:el-table__body-wrapper="loadMore"中，参数是"el-table__body-wrapper"，例如在v-loadmore:el-table__body-wrapper:aa="loadMore"中，参数是"el-table__body-wrapper:aa"

  2. modifiers：传递给指令的修饰符对象，例如在v-loadmore:el-table__body-wrapper.name.age="loadMore"中，修饰符对象是{name: true, age: true}

  3. value：传递给指令的值，例如在v-loadmore:el-table__body-wrapper="loadMore"中，值是loadMore

Vue.directive('loadmore', {
  bind(el, binding) {
    const { arg, value, modifiers } = binding
    const distance = +Object.keys(modifiers)?.[0] || 0
    const selectWrap = el.querySelector(`.${arg}`) // 滚动的容器
    const handler = function () {
      const isNext = Math.abs(this.scrollHeight - this.scrollTop - this.clientHeight) < 1 + distance
      if (isNext) {
        value()
      }
    }
    selectWrap.addEventListener('scroll', handler)
    el.__handler__ = handler
  },
  unbind(el, binding) {
    const selectWrap = el.querySelector(`.${binding.arg}`)
    if (selectWrap && el.__handler__) {
      selectWrap.removeEventListener('scroll', el.__handler__)
    }
  }
})

三、指令的使用

v-loadmore:el-table__body-wrapper="loadMore"


loadMore方法：
    loadMore() {
      if (this.total > this.tableData.length) {
        this.params.pageNo++;
        this.getList();
      } else {
        console.log("没有更多了");
      }
    }

完整代码：

<template>
  <div>
    <div style="text-align: right">
      总条数:{{ total }}当前条数:{{ tableData.length }}
    </div>
    <el-table v-loadmore:el-table__body-wrapper="loadMore" :data="tableData" height="300" border>
      <el-table-column prop="index" label="序号" width="100" />
      <el-table-column prop="nameCn" label="中文名称" />
      <el-table-column prop="nameEn" label="英文名称" />
      <el-table-column prop="specsNames" label="规格" />
    </el-table>
  </div>
</template>
<script>
import { listApi } from "@/api/request";
export default {
  data() {
    return {
      tableData: [],
      params: { pageNo: 1, pageLe: 10 },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    loadMore() {
      if (this.total > this.tableData.length) {
        this.params.pageNo++;
        this.getList();
      } else {
        console.log("没有更多了");
      }
    },
    async getList() {
      try {
        this.loading = true
        const { total, data } = await listApi(this.params);
        console.log("请求参数", { ...this.params }, "请求结果", total, data);
        this.total = total;
        if (this.params.pageNo == 1) {
          this.tableData = data;
        } else {
          this.tableData.push(...data);
        }
        this.tableData = this.tableData.map((n, index) => ({
          ...n,
          index: index + 1,
        }));
      } catch (err) {
        console.log(err);
      } finally {
        this.loading = false
      }
    },
  },
};
</script>

后续需要封装el-select和el-autocomplete组件的加载更多，select组件还需要用到修饰符

另外，需要实现通过修饰符传一个值，如100，滚动条距离底部100时就加载下一页

四、设置滚动条距离底部还剩50px时触发搜索

使用指令时，通过修饰符传递参数： v-loadmore:el-table__body-wrapper.50="loadMore"

指令改造

Vue.directive('loadmore', {
  bind(el, binding) {
    const { arg, value, modifiers } = binding
    const distance = +Object.keys(modifiers)?.[0] || 0
    const selectWrap = el.querySelector(`.${arg}`) // 滚动的容器
    selectWrap.addEventListener('scroll', function () {
      const isNext =
        this.scrollHeight <= this.scrollTop + this.clientHeight + distance
      if (isNext) {
        value()
      }
    })
  }
})

loadMore需要加个判断，不然会触发多次的请求

    loadMore() {
      if (this.loading) return
      if (this.total > this.tableData.length) {
        this.params.pageNo++
        this.getList()
      } else {
        console.log('没有更多了')
      }
    }

五、源码

www.npmjs.com/package/xtt…

/xtt-tools/directives-v2/loadmore/index.js