el-select数据过多懒加载的解决_javascript技巧_脚本之家

长途寻觅

这么渲染难题解决了, 随之会自但是然叁个难题, 正是当您的value为当选的数目后,
分页数大的数据.

如上便是本文的全体内容,希望对我们的就学抱有助于,也希望我们多多支持脚本之家。

     export default { directives: { 'el-select-loadmore': { bind { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener { /** * scrollHeight 获取元素内容高度 * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. * clientHeight 读取元素的可见高度 * 如果元素滚动到底, 下面等式返回true, 没有则返回false: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop <= this.clientHeight; if  { binding.value; } } }, data() { return { value: '', options: [], formData: { pageIndex: 1, pageSize: 20, } }; }, mounted() { this.getList; }, methods: { loadmore() { this.formData.pageIndex++; this.getList; }, getList { // 这里是接口请求数据, 带分页条件 const _res = [1, 2, 3]; // 请求得到的数据 this.options = [...this.options, ..._res]; } }};

问题

下拉懒加载loadMore

当您选中后你要封存下去当前的id甚至lable, 下一次过来时, 带入当前组件,
手动放在options中,那样就排除了这几个难点.

威斯尼斯人官网,el-select数据过多管理方式

组件提供了远程搜索格局, 相当于依据你输入的结果相配选项.

像这种类型就完事了滚动懒加载, 具体细节在接纳时改善.

下拉懒加载, 当select滚动到底层时, 你再去央求一部分数额,
参预到当下数量中.

在经常项目中el-select组件的施用频率是不行之高的.
当数码过多时渲染时间非常长, 这里提供多少个管理形式.

当页数小时, options数据中绝非当前value的那多少个, value就展销会示为得到的id.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章