Element-ui 组件数据懒加载(el-menu举例)

基本思路就是找到需要懒加载的实际dom，通过样式设置：限制高度，内容溢出滚动，隐藏滚动条
下面用el-menu举例

首先
在上篇文章Vue element-ui表格数据懒加载的基础上提取通用功能到scroll.js

const ScrollTable = {
    /**
     * 给传入dom添加滚动监听，滚动到底部触发nextPageLoadFunc方法
     *
     * 使用需在main.js添加
     * import ScrollTable from './components/ScrollTable.js'
     * Vue.use(ScrollTable)
     *
     * @param dom document对象 例如element-ui <el-table ref='mytable'></el-table> dom传入this.$refs.mytable.bodyWrapper
     * @param currentPage 当前页
     * @param totalPage 总页数
     * @param nextPageLoadFunc 加载下一页数据的函数
     * @param log 是否开启log，默认false
     */
    addListener(dom, currentPage, totalPage, nextPageLoadFunc, log = false) {
        if (log) {
            console.log("ScrollTable.addListener", dom, currentPage, totalPage)
        }
        dom.addEventListener("scroll", function () {
            const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
            if (scrollDistance <= 0) {//等于0证明已经到底，可以请求接口
                if (log) {
                    console.log("ScrollTable.scroll to bottom,doLoadData")
                }
                if (currentPage < totalPage) {//当前页数小于总页数就请求
                    currentPage++;//当前页数自增
                    //请求接口的代码
                    nextPageLoadFunc()
                }
            }
        })
    }
};

export default {
    install(Vue) {
        Vue.prototype.ScrollTable = ScrollTable;
    }
}

在main.js注册一下

import scroll from './components/scroll.js'
Vue.use(scrollTable)

新建组件menu_horizontal.vue

<template>
    <div>
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
			<!--将这个menu的子列表懒加载 添加ref-->
            <el-submenu index="2" ref="myMenu">
                <template slot="title">我的工作台</template>
                <el-menu-item v-for="item in tableData" :key="item.index" :index="'2-'+item.index">{{item.address}}
                </el-menu-item>
            </el-submenu>

            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    import jsonCity from './../data/city.json'

    export default {
        name: 'my_menu',
        components: {},
        data() {
            return {
                activeIndex: '2',
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                totalPage: 0
            }
        },
        created() {
            this.totalPage = Math.ceil(jsonCity.length / this.pageSize)
            this.loadData(this.currentPage)
        },
        mounted() {
            let that = this;
            //找到dom
            let dom = that.$refs.myMenu.$el.childNodes[1].childNodes[0];
            console.log(dom)
            this.scroll.addListener(dom, that.currentPage, that.totalPage, function () {
                that.loadData(that.currentPage + 1)
            })
        },
        methods: {
            loadData(currentPage) {
                let data = jsonCity.splice((currentPage - 1) * this.pageSize, this.pageSize)
                this.tableData = this.tableData.concat(data);
                console.log("表格数据量：", this.tableData.length)
            },
            handleSelect() {

            },
        }
    }
</script>
<style>
	/*隐藏滚动条*/
    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
	/*限制高度 内容溢出滚动*/
    .el-menu--horizontal .el-menu--popup {
        height: 100px;
        overflow-y: scroll;
    }
</style>

data.json数据用 json-generator在线生成

[
  '{{repeat(5, 1000)}}',
  {
    _id: '{{objectId()}}',
    index: '{{index()}}',
    address: '{{city()}}'
  }
]