技术标签: elementui
业务场景是后台一次返回10万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我把这个改造了一下,直接上代码, 里面注释写的很清楚了就不解释了.
<template>
<div class="content">
<el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
<el-option
v-for="(item, index) in list.slice(0, rangeNumber)"
:key="index"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
import Vue from "vue";
Vue.directive(
'el-select-loadmore', {
bind(el, binding) {
let self = this
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) binding.value()
});
}
}
)
export default {
data() {
return {
list: [],
choose: "",
rangeNumber: 10,
}
},
created(){
this.getList()
},
methods: {
getList(){
for(let i = 0; i < 100000; i++){
this.list.push({
label: "menu",
value: "menu"
})
}//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
},
loadMore(n){
//n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
//if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数 可自定义
},
}
}
</script>
<style lang="less" scoped>
.content{
padding: 24px 24px;
.el-input{
width: 400px;
margin: 20px;
}
}
</style>
下面代码没有用el-select搜索是因为在使用过程中发现模糊查询不能满足自己,所以自己就写了一个input框,使用watch监听,详情见代码
<template>
<div class="content">
<el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
<el-input v-model="search" size="small" placeholder="请输入搜索内容"></el-input>
<el-option
v-for="(item, index) in list.slice(0, rangeNumber)"
:key="index"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
import Vue from "vue";
Vue.directive(
'el-select-loadmore', {
bind(el, binding) {
let self = this
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) binding.value()
});
}
}
)
export default {
data() {
return {
list: [],
choose: "",
rangeNumber: 10,
stashList: [],
search: ""
}
},
created(){
this.getList()
},
watch: {
search(newVal, oldVal){
if(newVal){
this.list = this.stashList
this.list = this.list.filter(item => {
if(item.label.includes(newVal)){
return item
}
})
}else{
this.list = this.stashList
}
}
},
methods: {
getList(){
for(let i = 0; i < 100000; i++){
this.list.push({
label: "menu" + i,
value: "menu" + i
})
}//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
this.stashList = this.list
},
loadMore(n){
//n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
//if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数 可自定义
},
}
}
</script>
<style lang="less" scoped>
.content{
padding: 24px 24px;
.el-input{
width: 400px;
margin: 20px;
}
}
</style>
文章写至此数据量大的问题已经基本解决,在写的过程中突然觉得,slice方法还是怪怪的, 这里还可以用别的方法,关于slice方法就写到这里了.
文章浏览阅读1.4k次。摘要:IAP是利用自己的程序代码实现升级程序(新的APP)从外部接口(可以是串口、I2C、SPI、网口等等)写入到flash中,再通过flash读写操作,将新的APP覆盖原有APP程序,在重新从新的APP入口位置启动我们的应用程序,同时也负责IAP代码的修改和迭代。_云升级终端设备开发
文章浏览阅读677次。方案一:STM32系列单片机控制,该型号单片机为LQFP44封装,内部资源足够用于本次设计。STM32F103系列芯片最高工作频率可达72MHZ,在存储器的01等等待周期仿真时可达到1.25Mip/MHZ(Dhrystone2.1)。内部128k字节的闪存程序存储器,也就是说代码量可以写到128k字节,本次设计足够,内部高达20K字节的SRAM。_proteus语音模块
文章浏览阅读146次。题目来源: 翻转二叉树翻转一棵二叉树。示例解题思路及代码1. 思路递归的交换每个结点的左右子结点即可。2.代码var invertTree = function(root) { if (root == null) { return null; } var temp = root.right; root.right =root.left;..._root.left,root.right = root.right,root.left
文章浏览阅读79次。定制化大数据平台一键安装OS大数据平台一键安装OS系列大数据平台一键安装OS【定制化OS镜像制作】搭建脚本篇脚本命名随便,只要能看懂就行镜像包说明os1.1.iso 用于安装服务端和客户端操作系统hdp.iso 用于安装hdp服务1.架构图:服务端客户端2.原理分析安装系统-安装本地yum源-安装http源-安装并配置ntp服务-配置秘钥-安装jdk-安装mysql-编译..._大数据平台一键安装
文章浏览阅读335次,点赞4次,收藏6次。每个分类下面都有许多助手,对编程有兴趣的朋友,想自学一下然后做出自用的小程序,也不用去麻烦其他大佬了,问AI还不会挨骂,同时还可以根据AI的思路自己探索,最重要的是与AI先交谈你能学到如何“正确提问”,这可是一个很重要的技能~现在国内各家的AI都在陆续更新中,讯飞星火大模型,一段时间不见,到今天也经历了多次大更新,增强了星火助手,增加了更多插件,还上线了一个现在比较潮的“智能体”友伴功能,下面就一起来玩玩看!用它的简历生成插件来生成一个模板,再提交给这个面试官来面试学习一下,完成求职闭环了属于是。
文章浏览阅读198次。计算机导论(论文)计算机科学与技术学习报告如今社会快速发展,计算机已经走入千家万户,随着计算机的普及,它在生活中的作用越来越大。它的广泛使用促进了生产力的发展,逐步改变了人们的生活方式。使人们的工作、学习和生活变得非常便捷、舒适和高效。你大可不必浪费大量的时间去图书馆查找资料,你只需在网络上搜索一下便会出现大量的你想要的信息和资料;你也不必为没钱没机会买到足够的学习资源而发愁,在网络上你就可以看书..._计算机导论论文中的图表
文章浏览阅读978次。aws ec2默认是使用ec2-user账号登陆的,对很多文件夹是没有权限的。如何使用root账号执行命令就是一个问题了。很多大厂的云服务,是默认不给root权限的,需要下载下来一个密钥,然后导入ssh客户端里另外套路云需要手动设置一次密码解决办法如下:1、首先使用xshell登录到服务器:进入XShell,点左上角的新建“主机”那栏输入IP“用户身份验证”里填你的账号和密码,默认账号是ec2-user,密码是服务商给你的密码如果是密钥登录,需要在“方法”那把“密码”改成“公钥”,并选择你导_亚马逊创建的ec2服务器,root密码是什么
文章浏览阅读2.2k次。retention policy: 存储策略,用于设置数据保留的时间,每个数据库刚开始会自动创建一个默认的存储策略 autogen,数据保留时间为永久,之后用户可以自己设置,例如保留最近2小时的数据。插入和查询数据时如果不指定存储策略,则使用默认存储策略,且默认存储策略可以修改。InfluxDB 会定期清除过期的数据。----------------------------------------..._influxdb 过期策略
文章浏览阅读801次。前言:前部分.是ThreadLocal补充模块解析.后部分.200+面试题内容.1.ThreadLocal 是什么?ThreadLocal 是一个本地线程副本变量工具类。主要用于将私有线程和该线程存放的副本对象做一个映射,各个线程之间的变量互不干扰,在高并发场景下,可以实现无状态的调用,适用于各个线程不共享变量值的操作。2.ThreadLocal 工作原理是什么?ThreadLoc...
文章浏览阅读15次。C#实现互斥锁同步执行两个线程函数(附完整源码)
文章浏览阅读4.9k次,点赞2次,收藏9次。大概样子如下:配置代码如下:export const gateChartConfig = function() { return { color: '#ED7D31', xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { _echarts柱状图右侧带百分比
文章浏览阅读1.4k次。1. 引言(Introduction) 1.1. 关键词定义(Definitions)有关定义说明如下:安全管理:计算机技术安全管理的范围很广,可以包括网络安全性、数据安全性、操作系统安全性以及应用程序安全性等。很多方面的安全性管理大都已经有成熟的产品了,我们只需根据自己需要有选择性的使用就_访问控制使用的二元组是什么