data为渲染数据,存在大批量数据时,防止下拉卡顿,采用懒加载的方式逐步增加数据 由于el-select组件并没有提供内部数据滚动的事件或者自定义内部滚动容器DOM元素 . 只能通过F12 查看页面结构获知滚动的容器DOM选择器 . 可以通过自定义指令的方式,提取共用逻辑,不局限于select,也可用于其他列表懒加载渲染的UI组件. /** ...
1.首先可以用原生js封装一个下拉框,这样确实能提高前端性能,但是不多,我说实话。 2.每次进来加载默认值(上一次选的值)的后十条数据,这样的话我觉得可能就是数据不卡了,但是明显多了http请求,不符合雅虎三十五军规。 3.下拉框做数据懒加载 三.下拉框数据做懒加载 思路:通过监听下拉框的滚动条进行加载下拉框数据。
一、如果是 Vue3 的话,使用 element-plus 的 Select V2 虚拟列表选择器 二、如果是 Vue2 的话,在 Select 选择器上,filter-method 自定义搜索方法 这种是自己处理的业务逻辑,备份下拉数据 this.options,在自定义的搜索方法中,从备份下拉数据中过滤出搜索项并截取前100条数据,赋值给 el-select 的下拉项 this.o...
原因:下拉框数据过多,若渲染全部数据,会导致 DOM 数量太多,操作卡顿。 解决办法:将获取的数据(allList)和渲染数据(list)分离开,限制渲染数组的长度。 <template><el-selectv-model="value"filterable:filter-method="filterList"placeholder="请选择"><el-option v-for="item in allList":key="item.value":l...
将搜索功能集成在输入框当中 2、选项太少时就别采用下拉菜单 如果选项太少,但是依然使用下拉框就有点浪费了。你可以使用普通的按钮或者选择器控件来搞定这个功能,这可能比下拉菜单来的更加直观和易用,因为相比之下,下拉框还会隐藏信息。 所以,没有太多选项的时候,就尽量不要使用下拉菜单。
或者@change="$forceUpdate()" 原因 下拉框数据是循环别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新 直接给你反 纯id数组的话 不回出现这问题 我当时的数据结构是,然后自己for循环拼接的id数组
*出现这个问题好像是因为下拉框数据是循环掉别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新render。 写一个方法,在select的change事件中调用此方法,运用 this.$forceUpdate()强制刷新,页面正常选值。*...
问题:目前在用element ui的table组件,但是由于列数太多,官方又不支持自适应宽度,无奈总是会有左右滚动条出现,这样导致的问题便是数据修改起来必须先划到下边滚动左右滚动条,然后进行数据查看和数据修改,极其不方便! 1.首先有没有办法能解决自适应的问题,而且要保证某些列(如下拉框)的文字不被阻挡2.退而求其次,希...
relationList: [] // 下拉框的数据 } }, methods: { // 远程搜索方法,数据太多,不能直接渲染 remoteMethod(query) { if (query !== '') { this.relationList = [] this.loading = true // 这个方法可以做下节流处理,不需要一输入就发起请求,这里偷懒没有写 ...
ElementUI-vue修改下拉框的默认样式 如下图: 通过Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。 仔细找了一下elementUI的官方文档,在这里要给select标签增加 :popper-append-to-body=“false” 属性 接下来的css设置就在... ...