vue封装自定义指令,实现表格滚动到底部加载下一页

一、效果

二、指令的封装

  • 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

js 复制代码
Vue.directive('loadmore', {
  bind(el, binding) {
    const {
      arg,
      value
    } = binding
    const selectWrap = el.querySelector(`.${arg}`) // 滚动的容器
    selectWrap.addEventListener('scroll', function () {
      const isNext = this.scrollHeight == this.scrollTop + this.clientHeight
      if (isNext) {
        value()
      }
    })
  },
})

三、指令的使用

js 复制代码
v-loadmore:el-table__body-wrapper="loadMore"


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

完整代码:

js 复制代码
<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 {
        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);
      }
    },
  },
};
</script>

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

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

相关推荐
LHX sir13 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S13 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长13 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院13 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain13 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端14 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo14 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
岁月宁静14 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby15 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒15 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端