关于el-select做分页后切换分页显示id的问题

最新推荐文章于 2024-04-01 14:54:00 发布
最新推荐文章于 2024-04-01 14:54:00 发布
阅读量129 收藏
点赞数
文章标签： vue.js 前端 javascript ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54882260/article/details/133064099
版权

刚刚用el-select做项目，数据很多使用了分页，然而当切换分页时，已选中的数据显示为id而不是name,这个地方需要增加romote属性，

 还要注意，在加了clearable之后，我的可搜索功能会有点影响，在我搜索字段时，点击清除按钮会清除掉输入的搜索字段，但是当再次点击下拉框时会发现没有拉取全部数据，因为搜索字段虽然在显示上被清掉了，但是在实际代码中并未清除，所以调接口时还会有输入的限定条件，这里增加select的clear方法进行清除

第二坑，如果el-option是循环出来的，key必须要独一无二的，这里我用的id,不然会有一种意外，当切换的最后一页不是满页，之前所选的项会变成id   刚出坑，谨记

 

harry的代码之路
关注
使用el-select封装支持搜索、多选、滚动分页的下拉框组件
swagLi的博客
08-03 2614
一、相信做管理后台的都会遇到这样需求、因为数据量太大下拉框数据采用滚动分页的方式同时支持搜索、多选/单选，下面是组件内容 1、目录放在components/commom-scroll/index <template> <el-select v-model="activeValue" v-loadmore="loadMore" remote filterable :remote-method="remoteMethod" class="sc
select 下拉滚动加载分页回显
co2021的博客
12-19 981
3.组件使用（目前只支持单选，多选需优化参数，后期再修改）1.全局封装自定义滚动指令。
el-select多选下拉里面放分页表格，实现分页回显
weixin_42573033的博客
10-09 4847
el-select多选下拉里面不放下拉列表，放分页表格，实现分页回显
el-select在改变value之后，没有渲染名称，显示的是id
flyaway0624的博客
06-19 1942
1.这里是因为下拉框里option使用了v-if来显示是否显示该选项 <el-select v-if="ruleForm.mergerToSelect!=='3'" filterable remote :remote-method="remoteMethod" :loading="loading" v-model="ruleForm.mergerToSelectId" v-el-select-loadmore="handleLoadmore" :placeholder="langs.choice
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
weixin_44719702的博客
07-12 2779
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
el-select 同时让label和id显示
qq_35011890的博客
04-15 632
关于el-select选择器同时拿到id value和label
el-select 分页获取数据
MSHK111的博客
07-21 491
在 directive的index.ts文件里使用elementLoadMore导出的install方法。> 自定义v-el-select-loadmore指令，实现下划select加载分页数据。在directive文件下创建elementLoadMore.ts文件。main.ts中引入 directive。
el-select回显数据，本来应该显示label的值，结果显示的是id值
weixin_45534301的博客
08-17 3229
解决方法：在调基本信息的接口中将回显的数据的数据类型转成数字类型。3）.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。解析一个字符串并返回一个数字。将字符串值乘以1不会改变值，并且默认情况下它会转换为数字。1）.如果是纯数字的字符串，则直接将其转换为数字。2）.如果字符串中有非数字的内容，则转换为NaN。下拉选框调的后端接口，返回的id时数字类型的，回显数据对应的id值是字符串类型的。null --> 数字 0。6.双波浪号 (~~) 运算符。3.使用一元运算符 (+)
el-select数据过多懒加载的解决(loadmore)
10-16
如果在分页较大的情况下，用户选中的数据页中没有包含当前的选项，那么在切换到下一页后，可能会出现value显示为对应id的情况。为了避免这种情况，需要在切换分页之前，将选中的id和label保存下来。当组件重新渲染时...
关于element中el-select数据量大时如何进行分页
热门推荐
weixin_30419799的博客
05-12 1万+
在使用element中的el-select中因为有时候数据可能会比较多，所以我就想分步加载显示，就像： 因此我在组件中这么写的： 下面是样式 <style lang='stylus' scoped> .selectJob span width 120px overflow hidden ...
使用el-table实现分页选择
再来一块红烧肉
08-31 9637
使用el-table实现分页选择 element 多选Table分页 iview 分页选择 分页勾选
关于element-UI的el-select下拉框数据回填显示的id问题
SYXZSs的博客
01-25 7860
关于element-UI的el-select下拉框数据回填显示的id问题 问题如图： 三个form-item都是使用el-selece，但是责任人一栏却显示为id 问题情况 是后台返回的数据类型的原因。 我在接口获取的function里 循环责任人的id，打印类型为number。此时以这样的情况可以判断为id应该属于String类型。 如下图：我使用map更改原数组，使其id转为String再重新赋值给id。整个数组再赋值给空数据，这样再绑定el-select就不会出现数据回填显示id的情况了！
vue2+element-ui 问题 el-select 远程搜索出现 回显出现ID
SzsxXy的博客
03-29 2964
vue2+element-ui 问题 el-select 远程搜索出现 回显出现ID
element-ui中select选择框渲染文字内容但是获取的是列表的id
weixin_45803990的博客
12-29 1794
label表示的是列表渲染的内容，value是change中绑定的值。 <el-select v-model="value" placeholder="请选择" @change="selectChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.id"> </el-opti
解决el-table表格下select框数据回显id问题
qq_42241873的博客
09-03 4522
解决el-table表格下select框数据回显id问题 其实之前是有遇到类似问题，但是没有做总结，一时半会儿遇到重复的问题也想不出是什么原因导致的，现在做个总结，提出原因且给出解决方案； 截图只是简单描述一下bug； 之所以更改首条数据会影响到下条数据的id回显或者更改下条数据会影响到首条数据id回显i就是因为它们没有针对当前行的数据去取值和拿值，所以解决方案就是：拿到表格当前行数据，对当前行数据进行数据更新 废话不多说，上代码： <el-table-column label="建议
el-select的某一项选中后显示id
zhangyu_98的博客
09-22 740
el-select的某一项选中后显示id
el-select默认选中 显示的是id 不是汉字
weixin_50899360的博客
08-11 1454
el-select回显 默认选中 显示id
el-select分页懒加载
最新发布
weixin_42878641的博客
04-01 933
el-select实现分页懒加载功能
el-select下拉分页
09-14
el-select是一个基于Element UI库的下拉选择组件。它提供了分页功能，可以实现通过下拉框的方式加载更多选项。通过引用和引用中的代码片段，可以看出el-select组件的使用方法。 首先，需要导入el-select组件的相关...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值