el-select 远程搜索

最新推荐文章于 2023-11-16 10:34:52 发布
最新推荐文章于 2023-11-16 10:34:52 发布
阅读量189 收藏
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43204464/article/details/134007963
版权

1.filterable 是否可搜索属性和remote 是否可远程搜索属性写上

2. 绑定：remote-method  = remoteMethod 远程搜索方法

3.在remoteMethod里面写内容，请求后台数据

htt2321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select数据过多懒加载的解决(loadmore)
01-19
el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. 某组件中: <template> <el-select v-model=value placeholder=请选择 filterable multiple v-el-select-loadmore=lo
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select远程搜索:remote-method遇到的坑
haosicx的博客
08-05 7838
在使用远程搜索的时候 就是每次发请求获取数据然后选择 会出现选择后总是会出现选择紊乱的情况 在使用debugger后排查了很久 发现每次选择内容后 都会触发:remote-method这个事件 也就是继续会发请求 然后获取到新的数据重新赋值下拉框 这样的话我上面刚刚选择的内容就被改变了 然后又回去看文档 发现如果options是遍历出来的 就要加一个key值 文档上写的是item.value作为key值 然后我返回去看数据的value 发现有一些数据的value值是一样的 这样就不.
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
热门推荐
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
Vue 中 使用 ElementUI 中的 el-select 中的remote-method 如何添加自定义方法 ？
dyp330的专栏
01-30 9471
首先认为大家都知道el-select 组件 可以支持远程搜索，官网代码 https://element.eleme.cn/#/zh-CN/component/select ，不知道的朋友自行学习哦！ el-select 组件 支持远程搜索 有一个:remote-method="remoteMethod" 这个方法 （官网有代码内容），但是如果需要在单独传一个 自定义参数，怎么办呢？ 需求：把组件放在了 el-table的列中 需要把 row的数据传递进去，实现如下： :remote-met...
el-select二次封装，解决数据量太大导致卡顿问题，实现远程搜索，滚动加载数据，搜索数据回显
maDreambig的博客
05-26 3681
问题描述： 最近项目中，表单中有需要选择公司联系人的下拉框，由于人员过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装 解决方案： remote-method：远程搜索方法 visible-change：下拉框出现/隐藏时触发 1、对返回数据进行切割，使用visible-change，在下拉框出现时默认显示100条数据； 2、使用remote-method远程方法进行搜索； 3、搜索时，将已经选择的数据合并到搜索列表中，防...
实现el-select的远程搜索，并且展示最近搜索的十条数据
最新发布
weixin_64359407的博客
11-16 1484
使用el-select实现远程搜索，并且可以输入进行搜索，首次点击的时候显示十条历史记录，在输入之后就展示远程搜索返回的数据。
el-select组件远程搜索时，单选状态下无法触发remote-method远程搜索功能——基础积累
yehaocheng520的博客
11-16 1万+
今天在做后台管理系统时，需要用到select组件的远程搜索功能： element-ui官网上是有相应的远程搜索的功能的： 具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。 官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。 针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。 但是在单选时，就出现了问题：上图中拿到关键字的
Element-ui select远程搜索
FanZaiYo的博客
09-08 1551
reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词。.toLowerCase()的值要与上方对应。remote-method: 远程搜索方法。filterable: 是否可搜索。要注意option中应该对应的是。remote: 是否为远程搜索。js中return item.
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui——element-ui中的el-select中 remote-method 远程搜索方法传入多个参数
qq_43201350的博客
05-09 2933
使用箭头函数 <el-select :remote-method="(query) => remoteSearchAdGroup(query, item.name)" placeholder="请选择账户名"> <el-option ></el-option </el-select>
element 虚拟，节流select
Lifemustrough的博客
08-26 562
由于select组件如果里面的选择项过多，会造成卡顿，所以封装一个组件，节流选择，支持大数据搜索 <throttling-select v-model="value" :list="options" :placeholder="placeholder" selkey="key" sellabel="label"></throttling-select> 添加组件 throttling-select如下 <template> <el-select @vi
vue el-select远程搜索
sunlizhen的专栏
02-14 4532
<el-select v-model="listQuery.userId" :remote-method="remoteMethod" filterable remote clearable placeholder="请输入" > <el-option v-for="item in options" :key="item.id" ...
el-select进行二次封装，支持远程搜索remote-method+滚动加载el-select-loadmore。可结合使用
LiNGY0110的博客
03-16 2974
使用场景： 类似：表单中有需要选择的下拉框选项太多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装 解决方案： remote-method：远程搜索方法 创建 el-select-loadmore 指令方法进行滚动加载 组件代码： value：数据绑定传入的数据 options：选项数据，必填 @visibleChange 下拉框出现/隐藏时触发 @loadMore 滚动加载触发 @remoteMethod 远程搜索触发 @change 选中值发生变化时触发 <te
ElementUI使用随记
weixin_43743804的博客
05-08 3314
1、el-select的:remote-method默认的参数为输入的值，添加自定义参数 2、表单验证规则动态修改后自动进行验证 3、清空某个表单元素的验证提示 4、清空表单的事件不起作用的原因 5、表单校验 — 动态添加的列表型元素的rules校验 6、表单校验 —— 动态添加的列表型元素的rules校验 7、搜索框在手机端的使用 8、更改element 元素样式
element v2.15.7 el-select 使用:remote-method 没有下拉箭头问题
weixin_37342647的博客
05-10 1009
element 2.15.7版本使用 :remote-method的时候，内部组件实现的i标签会缺少类名，但是产品需要补回这个箭头
vue+element表格 ＜el-select＞远程搜索
weixin_49393290的博客
11-07 4177
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。 <el-table-column prop="leftKey" ...
element-ui的两种远程搜索实现
lovecoding1的博客
04-06 4403
element-ui的两种远程搜索实现
el-select 远程搜索回显
04-05
el-select 远程搜索回显的实现需要以下步骤： 1. 使用 el-select 的 remote 方法来实现远程搜索功能； 2. 在 remote 方法中，将搜索关键字作为参数传递给后端接口，并获取接口返回的搜索结果； 3. 在 el-select 的 filterable 属性中设置为 true，开启搜索功能； 4. 在 el-select 的 remote-method 属性中设置一个函数，用于在搜索时调用 remote 方法并更新 el-select 的下拉列表的选项； 5. 在 remote 方法中，将后端接口返回的搜索结果映射为 el-select 的下拉列表选项，并将这些选项作为参数传递给 remote 方法的回调函数； 6. 在回调函数中，更新 el-select 的下拉列表的选项。 以下是一个示例代码： ```html <el-select v-model="value" remote filterable :remote-method="getOptions" :loading="loading" > <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" /> </el-select> ``` ```javascript export default { data() { return { value: '', options: [], loading: false, }; }, methods: { getOptions(query) { if (query !== '') { this.loading = true; // 调用后端接口获取搜索结果 this.$http.get('/api/search', { params: { q: query } }).then(res => { this.loading = false; // 将搜索结果映射为 el-select 的下拉列表选项 const options = res.data.results.map(result => ({ value: result.id, label: result.name, })); // 调用回调函数更新 el-select 的下拉列表的选项 this.options = options; }); } else { this.options = []; } }, }, }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值