使用uniapp，uni-data-select组件时，内容长度没超过容器宽度时候虽然能显示全内容但是数据后边会出现三个点，逼死强迫症

原创 已于 2024-03-20 00:51:26 修改 · 1.6k 阅读 · 12 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#uni-app
于 2024-03-18 23:39:34 首次发布
文章讲述了在微信小程序开发中，使用uniapp的uni-data-select组件时，内容未超出容器宽度却仍显示省略号的困扰，作者通过查找并修改源代码解决了这个问题，提供了具体的操作步骤和展示效果。

项目场景：

微信小程序开发，使用uniapp，uni-data-select组件时，内容长度没超过容器宽度时候虽然能显示全内容但是数据后边会出现三个点，逼死强迫症
在这里插入图片描述

解决方案：

找到组件的源代码，然后删除那三个点
在这里插入图片描述
变成这个样子就好了
在这里插入图片描述

看效果：
在这里插入图片描述

uniapp 下拉框效果使用 uni-data-select标签
新人一枚，互相学习哦！
04-20 1万+
uniapp 下拉框效果使用 uni-data-select标签
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 1万+
uni-app——下拉框多选
uniapp踩坑之项目：判断字符串长度自动调整选项卡宽度
意初的博客
08-14 1920
uniapp踩坑之项目：判断字符串长度自动调整选项卡宽度，利用动态:class来判断字长调整选项卡uni-data-select宽度
uniapp-select下拉菜单组件
m0_62134648的博客
06-25 1万+
插件市场 链接 字段和方法说明。
uni-data-select 使用服务器数据
代码是贝多芬的音符
06-10 7466
基本用法 使用isshow控制。有数据了才显示控件。 设置 localdata 属性后，组件会通过数据渲染出对应的内容
小程序下拉框select的内容溢出
weixin_57653786的博客
09-12 861
【代码】小程序下拉框select的内容溢出。
uni-data-select 选择框中选项过长问题
weixin_46489844的博客
06-11 1822
修改显示框的内容width 可自由调整。修改选择部分 width 可自由调整。
uniapp和vue3+ts创建自定义下拉选择框select组件
11-20 4524
使用uniapp开发小程序的时候，使用了uview的ui组件，但是里面没有下拉选择组件，只有Picker 选择器，但是我们想要使用下拉选择的组件，所以需要自定义个一个下拉选择的自定义组件，我就只能自己动手创建这个自定义组件了，支持：多选，单选，下拉框在框内还是框外。自定义组件源代码：Select.vue。
uniapp多功能选择器组件，类似于elementui，可搜索可下拉可清空（基于uView二次封装），支持各端兼容，非常好用！！！
qq_32058147的博客
06-07 1万+
（1）因为组件基于uView二次封装，所以请安装uView组件，安装步骤请看uView官方文档。说明：@select方法可以在父组件拿到当前选择项的对象数据。废话不多说，先看视频！
uniapp中关于unidataselect组件出现at view.umd.min.js:1报错的另类解决方案以及placeholder不显示的问题
07-05 8279
uniapp的几处bug踩坑记
uniapp修改uni-data-select 的长度
qq_46131497的博客
04-25 2433
我当时是为了他的长度符合我模态框的长度，在里面直接修改了它的长度。可以直接进入组件修改样式。
小程序uni-select溢出文字处理方式
可可的博客
08-07 1702
【代码】小程序uni-select溢出文字处理方式。
uniapp下拉框显示不全
qq_46615386的博客
11-16 1870
uni-data-select组件下拉内容显示不全
uni-data-select的使用（做笔记用，不喜勿喷！！）
weixin_67281896的博客
06-27 1万+
1.使用uni-da'ta-select下拉框放接口数据时，出现不渲染的情况----可能是因为方法还没拿到数据，而组件已经渲染完毕了，因此加了一个显示控制。
uni-app中select下拉菜单
热门推荐
lsklike的博客
08-17 2万+
uni-app中select下拉菜单
uniapp自己封装一个select组件
wjuxing的博客
01-04 1557
封装了一个select小组件
uni-app多选select组件，兼容多平台小程序、H5
知之为知之，不知为不知
10-19 1万+
uni-app 多选select组件 1. 多选select组件目前只支持多选，单选请用单选select组件 2. 支持配置关键字段 3. 兼容 H5、微信小程序、百度小程序、支付宝小程序、头条小程序 4. 按需引用 5. 性能良好，无bug
uniapp的uni-data-select的v-model和value
qq_46131497的博客
04-25 3932
一开始我的value是对应的索引，在我发送请求传参的时候，我当时已经把text的值赋值给了这个表格对应的参数，但是传到后端的值确却是value中的索引，之后我将value也对应改成了text的值，即可解决问题。因项目需要，自定义了数据来源，因为组件自带的方法@change可以通过e将选中的text对应的value传到方法中，
uniapp - [官方组件] uni-data-select 下拉框右侧没有清除重置图标按钮，HBuilder导入uni-data-select插件后设置clear属性无效（并且右侧没有小箭头图标）
🏆 前端领域优质创作者
03-26 3531
uniapp，uni-data-select，下拉框，uniapp官方组件，uniapp插件uni-data-select不显示图标，右侧箭头不显示怎么办，官方下拉框插件没有清空清除按钮叉号图标，clear属性没有效果没有icon图标，uni-data-select组件没图标，不显示图标icon为什么，使用uni-data-select插件图标无法显示没有重置按钮和右箭头，uniapp导入安装uni-data-select后没有图标和清空icon图标，无法修改clear属性，没有清空功能，看不到重置icon
uniapp下拉选择组件
最新发布
weixin_52726621的博客
12-25 3752
要解决第一和第二个问题，我们的自定义组件需要使用插槽，插槽用来放我们的初始显示组件，来灵活适配各种组件。以上代码都可以直接拷贝使用，无其他关联项，vue2、vue3、小程序、h5、APP都可用。2、初始显示的组件不能定死，可以是button，可以是view，或者是input，要灵活。3、dataList：传入的数据列表，列表为对象，多选时对象需要指定唯一标识。，但是不支持input组件，所以我们自己来实现一个。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小袁同学.

赏个早餐吃？

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值