// 清空之前的选项 this.leaderOptionsTop30.splice(0, this.leaderOptionsTop30.length) // chosen表示已被选择的选项,添加这一部分主要是为了回显,避免选择框中直接出现用户id const chosen = this.getChosenItemsArr() // 检索项 + 已选项的并集 const result = [...arr, ...chosen.filter(item => !a...
element-ui中el-select下拉框选项过多 el-select中options数据超过3000条就会造成前端页面明显卡顿,本次我的遇到的业务场景数据是近2w条,因此在不优化的情况下页面压根无法使用,下面给出我的优化过程。 一种优化思路 element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一...
【代码讲解】首先,肯定是在一个<el-form>下的<el-form-item>里面的表单项做的;<el-popover>标签的API可以参考上面贴的官方地址,主要是提供一个点击之后在下面附带的弹窗;弹窗中,我们设置一个输入框来进行选择值的搜索,下方(即<div class="icon-list">部分)用于多列显示我们想选择的值。 二、vue代码...
这样就实现了el-select下拉框数据的懒加载,注意: 如果和我一样下拉框里的选项(比如这里的allData)是动态变化的,在每次获取新的数据之后要把pageData里的数据还原,即在获取数据的方法里加上这两句: this.pageData.pageIndex = 1; this.pageData.pageSize = 20; 否则每次获取完新的数据之后只是从上一次加载到的...
1 ) 分段加载:也不加载下拉项,通过点击下拉框的时候,再去加载,此时的选项全部加载进来,该种情况只适用于缓加载情况,需要点击加载完后才能下拉选项,体验一般。 2 )提示:element-ui的select有一个filter-method方法,我们可以通过这个方法来进行过滤下拉项
多个页面调用同一个接口 作为下拉框的选项数据,接口返回上千条 导致页面异常卡顿 解决办法: 使用Select V2 虚拟列表选择器 代码示例: <el-form-itemlabel="场所名称"><el-select-v2class="row-inp"v-model="queryForm.id":options="placeData"clearable filterable placeholder="请选择场所"></el-select-v2><...
el-select数据过多处理⽅式 在⽇常项⽬中el-select组件的使⽤频率是⾮常之⾼的. 当数据过多时渲染时间⾮常长, 这⾥提供⼏个处理⽅式.远程搜索 组件提供了远程搜索⽅式, 也就是按照你输⼊的结果匹配选项.下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求⼀部分数据, 加...
mc-input 是我封装的一个el-select组件,现在的问题是页面特别卡顿,select选项多的时候会有上千条数据,当我新增一行或者点击下拉框选择颜色的时候,页面反应时间特别长。怎么才能解决页面卡顿的问题呢?javascriptvue.jselement-ui 有用关注4收藏 回复 阅读9.6k 改名字很伤神: 上千好像不是一个很大的数字吧?有线上...
corpselect类名是为防止修改掉所有组件的样式而添加的自定义类名。(为style标签添加scoped没效果) 展示结果如下图: 1634537130.jpg