给nz-select的nz-option设置样式

最新推荐文章于 2024-01-24 15:19:39 发布
最新推荐文章于 2024-01-24 15:19:39 发布
阅读量2.7k 收藏 3
点赞数 1
分类专栏： NG-ZORRO
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallNut/article/details/110659262
版权

今天刚好接到一个需求要求鼠标移到nz-option上时显示option的名字的全称，原因是option的label太长导致无法显示完全

(这里遇到相同问题的话也可以考虑将ng-zorro-antd组件版本升到10，版本10会自带title属性，但是版本升级可能会产生未知的问题所以我没考虑)

这里的话还是需要用到option的自带api nzCustomContent
在这里插入图片描述
我的实际代码如下，定义一个自定义模板，将想要进行写的样式放在自定义模板中，我这边相当于用div代替了原本只能使用内置api的nz-option，这样的话除了添加title属性以外还可以做更多的拓展，即使数据再多因为使用的是组件api所以兼容性也会比较好
code
在这里插入图片描述
view
在这里插入图片描述
这里只做了title的演示，也可以在div上做其他option无法做的拓展比如各种事件添加之类

希望能够帮到遇到相同问题的朋友们

花心小坚果
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
修改nz-select中的nz-option设置title属性展示内容。
Moria
05-17 5010
代码： <nz-select (ngModelChange)=“changeDevice()” > <nz-option *ngFor=“let option of deviceList” [nzLabel]=“option.deviceName” [nzValue]=“option”> 优化：鼠标悬垂的value上展示已经隐藏的value； 解决方法： // 展示...
弹窗样式修改，轻松实现弹窗功能
weixin_43312391的博客
10-27 2333
在vue页面中添加弹窗，并自设置弹窗相关样式，不使用element UI 也能轻松实现弹框。步骤如下： 1.点击“新增成员”按钮出现弹窗： <el-container> <el-button type="text" @click="addMember = true">新增成员</el-button> <el-dialog :visible.sync="addM
nz-select 选择器
陈广晗
05-26 7933
前几太难用到了 nz-select选择器就在这简单的说一下把，最基本的代码 html： <div> <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose"> <nz-optio...
关于ngModelOptions用法总结 让校验不过的验证绑定ngModel
weixin_34262482的博客
11-29 172
今天先来说说ngModelOption 我们项目用angular做了个校验标签。当输入非法的时候，会提示错误的提示框。 需求 两个输入框 需要互动， 左边的是最小字数 ， 右边的是最大字数。 左边< 右边的字数 感觉很简单 问题 其中有一种情况是这样 1 左边先输入33， 右边输入22. 2 正确情况下 右边报错，我修改左边的33为3. 3 但是右边的报错没有消失 我写了各种逻辑，最后发现...
【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）
Dai的博客
01-06 394
【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
12-03
Angular,Ng-Zorro框架nz-icon组件加载第三方SVG图标示例代码，完整工程文件夹。html图标书写格式：<i nz-icon [nzType]="'hello:computer'"></i>
ngx-tree-select:带有树项的角度选择组件
05-02
链接允许您的用户查看整个选择）安装这是安装组件的方法： npm install ngx-tree-select 或者yarn add ngx-tree-select 在您的应用程序模块上： import { NgxTreeSelectModule } from 'ngx-tree-select' ;...
FDY300NZ-NL-VB一种N沟道SC75-3封装MOS管
01-02
FDY300NZ-NL-VB一种N沟道SC75-3封装MOS管
FDY302NZ-NL-VB一种N沟道SC75-3封装MOS管
12-28
FDY302NZ-NL-VB一种N沟道SC75-3封装MOS管
FDPF12N60NZ-VB一种N沟道TO220F封装MOS管
01-03
FDPF12N60NZ-VB一种N沟道TO220F封装MOS管
Angular中nz-select实现两个选择框互相关联
m0_51935008的博客
01-25 2462
两个选择框 一个是版本名称 一个是版本号 每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
nz-select不能写在label标签里面
weixin_53862758的博客
03-03 383
昨天在写代码的时候，需要选择框，就用了angular的组件库ng-zorro，结果这个选择框不是不是根本没有下拉框就是点不了，前前后后试了好久也不行，有的时候突然又行了，本来以为可以了，结果又不行了，没有改代码啊，没有办法就就只能用原生的select标签了，就是这个标签原本的样式是真的丑，只能自己写css代码，写完之后不服气还是想要知道到底为什么，就又试了试，最后终于发现原来是nz-select标签不能写在label标签里面，我也不知道为什么会这样，select标签是可以写在label标签里面的，为什么nz
Angular 学习记录
weixin_44227791的博客
09-26 420
Angular 学习记录一、学习网站二、UI开源库三、常用工具四、开发环境五、VSCode 扩展六、常用命令(基于NG-ALAIN)七、基本使用八、Demo九、常用方法十、可能遇到的问题及解决办法 学习Angular有一段时间了，把学习到的东西记录下来，以便忘记了能重新复习 一、学习网站 HTML、CSS、JavaScript文档学习网站： https://www.runoob.com/ angular官网：https://angular.cn/. 可以看完基础知识后，学习并实践“英雄列表”的项目
ngModel与nzValue复杂场景
m0_59844638的博客
09-10 166
比如，下拉选择的应用场景中，要将用户选择的值绑定给ts中的变量name，此时ngModel（放在nzSelect中）与nzValue（放在nzOption中）相对应，与nzLabel无关。ng-antd-zorro和angular背景下，在使用select下拉选择框组件时，需同时使用到“[(ngModel)]”、“[nzLabel]”、“[nzValue]”等属性。其中有一些概念容易混淆，因此记录一下。[nzLabel]和[nzValue]这一对属于nzOption，前者是展示出来的值，后者是变量。
Angular--ng-options
冷月心的博客
04-02 1151
Angular--ng-options用途下拉菜单组成适用情形一，普通数组适用情形二（数组嵌套对象）适用情形三（普通对象） 用途 ng-options属性特别的好用，可以智能的从控制器中取值当前的值做选项，用在下拉菜单里边 下拉菜单组成 组成就两个东西，一个是显示的东西，叫label，一个是要提交的值，叫value 以打折为例，呈递到界面的选项是五折六折七折，真正提交的是0.5,0.6,0....
记录一个关于nz-select的奇怪问题
最新发布
weixin_72233826的博客
01-24 341
最先出现的问题是下拉选择带有背景色且无法选中。后将dbname初始值改为‘‘ ，第一次可选，且下拉正常。选择后打印值为undefined后出现与最先出现的问题一样。
Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】
yuyu的博客
04-13 695
Angular 全屏后选择器 (nz-select) 下拉选择无法使用。
angular2中，select、option，设置默认选中与获得选中项id
web
03-31 4228
在angular里，引入下拉框：(我用的ng-zorro组件库) <nz-select [(ngModel)]="selectedValue" nzPlaceHolder="Choose" style="width:300px;"> <nz-option id="nzoption" *ngFor="let option of selectedValueL...
nz-select使用所出现的坑
qq_43597212的博客
04-21 1067
angular nz-select 坑 初始化变量必须要定义类型 否则拉取数据无法渲染 listOfOption: Array<{ value: string; label: string }> = []; <nz-form-item *nzSpaceItem style="margin-right: 10px; margin-bottom: 10px"> <nz-form-label nzFor="email"></nz-form-lab
nz-select默认值设置
03-20
nz-select 的默认值可以通过在组件中设置 nzDefaultValue 属性来实现。例如： <nz-select [nzDefaultValue]="'default'"> <nz-option nzValue="default">默认值</nz-option> <nz-option nzValue="option1">选项1</nz-option> <nz-option nzValue="option2">选项2</nz-option> </nz-select> 这样，当 nz-select 组件初始化时，它的默认值就会被设置为 "default"。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值