// 清空之前的选项 this.leaderOptionsTop30.splice(0, this.leaderOptionsTop30.length) // chosen表示已被选择的选项,添加这一部分主要是为了回显,避免选择框中直接出现用户id const chosen = this.getChosenItemsArr() // 检索项 + 已选项的并集 const result = [...arr, ...chosen.filter(item => !a...
这样就实现了el-select下拉框数据的懒加载,注意: 如果和我一样下拉框里的选项(比如这里的allData)是动态变化的,在每次获取新的数据之后要把pageData里的数据还原,即在获取数据的方法里加上这两句: this.pageData.pageIndex = 1; this.pageData.pageSize = 20; 否则每次获取完新的数据之后只是从上一次加载到的...
element-ui中el-select下拉框选项过多 el-select中options数据超过3000条就会造成前端页面明显卡顿,本次我的遇到的业务场景数据是近2w条,因此在不优化的情况下页面压根无法使用,下面给出我的优化过程。 一种优化思路 element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一...
使用Select V2 虚拟列表选择器 代码示例: <el-form-itemlabel="场所名称"><el-select-v2class="row-inp"v-model="queryForm.id":options="placeData"clearable filterable placeholder="请选择场所"></el-select-v2></el-form-item> 这里由于多个页面使用 所以将数据请求放在了vuex actions 中 ,具体代码如下:...
1 ) 分段加载:也不加载下拉项,通过点击下拉框的时候,再去加载,此时的选项全部加载进来,该种情况只适用于缓加载情况,需要点击加载完后才能下拉选项,体验一般。 2 )提示:element-ui的select有一个filter-method方法,我们可以通过这个方法来进行过滤下拉项
mc-input 是我封装的一个el-select组件,现在的问题是页面特别卡顿,select选项多的时候会有上千条数据,当我新增一行或者点击下拉框选择颜色的时候,页面反应时间特别长。怎么才能解决页面卡顿的问题呢?
el-select数据过多处理⽅式 在⽇常项⽬中el-select组件的使⽤频率是⾮常之⾼的. 当数据过多时渲染时间⾮常长, 这⾥提供⼏个处理⽅式.远程搜索 组件提供了远程搜索⽅式, 也就是按照你输⼊的结果匹配选项.下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求⼀部分数据, 加...
corpselect类名是为防止修改掉所有组件的样式而添加的自定义类名。(为style标签添加scoped没效果) 展示结果如下图: 1634537130.jpg
有时候经常有输入一些表单数据,然后再修改的时候某些选项不能修改。 特别是el-select被disabled的时候经常出现显示不全的问题,后面的文字直接看不见了。 解决方案: //html部分<el-tooltip v-model:visible="visibleEnum":content="item.name"placement="bottom"effect="light"trigger="click"virtual-triggering:virtual...