vue自定义指令directive,实现下拉列表数据太多时,分段加载
<template> <div class="content"> <el-select v-model="value" v-el-select-loadmore="loadMore()" placeholder="请选择"> <el-option v-for="(item,index) in list.slice(0,rangeNumber)" :key="index" :label="item.name" :value="item.id"> </el-option> </el-select> </div> </template> <script> import Vue from 'vue'; Vue.directive('el-select-loadmore', { //el指令所绑定的元素,可以用来直接操作 DOM //binding一个对象 binding.value指令的绑定值,此处指令的绑定值是loadMore()的值 bind: function (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function () { console.log(this) /** * scrollHeight 获取元素内容高度(只读) * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. * clientHeight 读取元素的可见高度(只读) * 如果元素滚动到底, 下面等式返回true, 没有则返回false: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = (this.scrollHeight - this.scrollTop) <= this.clientHeight ? true : false; if (condition) binding.value(); }); } }) export default { data () { return { list: [ { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, { id: 2086, name: "KTV" }, { id: 2069, name: "NBA" }, ], value: '', rangeNumber: 10, } }, methods: { loadMore () { return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数 可自定义 }, }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>