数据过多，select优化

封装Select组件


<template><div><el-selectref="selectRef"v-bind="$attrs"v-on="$listeners"clearablefilterableremote><div class="option"><el-optionv-for="(item, index) in options":key="index":label="item.label":value="item.value"></el-option></div><div class="pagin"><el-paginationsmallbackgroundlayout="prev,pager,next,total"v-bind="$attrs"v-on="$listeners"></el-pagination></div></el-select></div>
</template><script>
export default {props: {options: {type: Array,default: ()=>[]},},data() {return {}},
};
</script><style lang="scss" scoped>
.option{min-height: 50px;height: auto;max-height: 150px;overflow-y: auto;
}
.pagin{background:#fff;
}
::-webkit-scrollbar{width: 2px;
}
</style>

使用

 <EverSelect:page-size="selectParam.pageSize":total="selectParam.total":current-page="selectParam.currentPage":options="selectList"@change="selectChange":value="form.data.productName":remote-method="remoteSearch":hide-on-single-page="true"/>// 远程搜索remoteSearch(val) {this.getList({page: this.selectParam.pageNum,rows: this.selectParam.pageSize,productBusinessTypeIds: [1, 3, 4],productName:val});},//选取item
selectChange(val){let info = this.selectList.find(item=> item.id ==val)this.$set(this.form.data, "productId", info.id);this.$set(this.form.data, "numberType", "1");this.$set(this.form.data,"productBusinessTypeId",info.productBusinessTypeId);this.$set(this.form.data, "productName", info.productName);this.$set(this.form.data, "productNum", info.productNum);},/* 切换页 */currentPage(val) {this.$set(this.selectParam, "pageNum", val);this.getList()},getList() {let param = {page: this.selectParam.pageNum,rows: this.selectParam.pageSize,productBusinessTypeIds: [1, 3, 4],};requestData("toChooseListQueryPageDigital", param).then((res) => {if (res.code == 1000) {this.selectList = res.data.records.map(item=>{return {...item,label:item.productName,value:item.id,}})this.$set(this.selectParam, "total",res.data.total);this.$set(this.selectParam, "currentPage",res.data.pages);}});},

效果图

数据过多，select优化相关推荐

DELETE大批量数据的性能优化
http://litterbaby.itpub.net/post/16841/276327 DELETE大批量数据的性能优化问题的提出: 一个表有上千万的数据,欲从该表中删除部分数据: 在线用的生产 ...
10w 行级别Excel数据量导入优化记录
点击上方蓝色"终端研发部",选择"设为星标" 学最好的别人,做最好的我们作者 | ThinkWon 来源 | blog.csdn.net/ThinkWon/a ...
MySQL 数据存储和优化------MySQL架构原理 ---- （架构---索引---事务---锁---集群---性能---分库分表---实战---运维）持续更新
Mysql架构体系全系列文章主目录(进不去说明还没写完)https://blog.csdn.net/grd_java/article/details/123033016 本文只是整个系列笔记的第一章: ...
MYSQL百万级数据，如何优化
MYSQL百万级数据,如何优化首先,数据量大的时候,应尽量避免全表扫描,应考虑在 where 及 order by 涉及的列上建立索引,建索引可以大大加快数据的检索速度.但是,有些情况索引是不会起效 ...
java控制一次传10条数据_java 定时同步数据的任务优化
前言定时任务在系统中并不少见,主要目的是用于需要定时处理数据或者执行某个操作的情况下,如定时关闭订单,或者定时备份.而常见的定时任务分为2种,第一种:固定时间执行,如:每分钟执行一次,每天执行一次. ...
easyexcel导出百万级数据_百万级别数据Excel导出优化
这篇文章不是标题党,下文会通过一个仿真例子分析如何优化百万级别数据Excel导出. 笔者负责维护的一个数据查询和数据导出服务是一个相对远古的单点应用,在上一次云迁移之后扩展为双节点部署,但是发现了服务 ...
数据中心 PUE 优化模型生成服务：AI 浪潮下的数据中心的省钱攻略，就用这几招
文章目录前言一.数据中心节能能省一大笔钱 1.1.全联接世界推动数据中心市场持续高速发展 1.1.1.用户联接激增 1.1.2.全球数据中心基础设施高速发展 1.2.数据中心的增长带来超额的用电量 ...
php超大树形分页,PHP+MySql千万级数据limit分页优化方案
PHP+MySql千万级数据limit分页优化方案 1年前阅读 2750 评论 0 喜欢 0 ### 原因徒弟突然有个需求,就是他发现limit分页,页数越大之后,mysql的消耗越大,查询时间越 ...
【深度学习-数据加载优化-训练速度提升一倍】
1,介绍数据加载深度学习的训练,简单的说就是将数据切分成batch,丢入模型中,并计算loss训练.其中比较重要的一环是数据打batch部分(数据加载部分). 训练时间优化: 深度学习训练往往需要 ...
【ABAP】-TSV_TNEW_PAGE_ALLOC_FAILED因ADRV底表数据过多，导致BP维护视图超资源瓶颈
问题呈现和原因: BP维护采购视图时,程序DOWN了,因为超资源瓶颈了因ADRV底表数据过多,导致BP维护视图超资源瓶颈想了解这个问题,需要知道以下几个内容: 关于ADRV这张表的存储内容 ADR ...

数据过多，select优化

封装Select组件

使用

数据过多，select优化相关推荐

最新文章

热门文章