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

最新推荐文章于 2024-01-24 15:19:39 发布

花心小坚果

最新推荐文章于 2024-01-24 15:19:39 发布

阅读量2.8k

点赞数 1

分类专栏： NG-ZORRO

本文链接： https://blog.csdn.net/smallNut/article/details/110659262

版权

NG-ZORRO 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天刚好接到一个需求要求鼠标移到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无法做的拓展比如各种事件添加之类

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花心小坚果

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

nz-select使用所出现的坑

qq_43597212的博客

04-21

1126

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

Angular2中select用法之设置默认值与事件详解

01-19

本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：一、设置默认值：现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的...

2 条评论您还未登录，请先登录后发表或查看评论

修改nz-select中的nz-option设置title属性展示内容。

Moria

05-17

5134

代码： <nz-select (ngModelChange)=“changeDevice()” > <nz-option *ngFor=“let option of deviceList” [nzLabel]=“option.deviceName” [nzValue]=“option”> 优化：鼠标悬垂的value上展示已经隐藏的value；解决方法： // 展示...

弹窗样式修改，轻松实现弹窗功能

weixin_43312391的博客

10-27

2455

在vue页面中添加弹窗，并自设置弹窗相关样式，不使用element UI 也能轻松实现弹框。步骤如下： 1.点击“新增成员”按钮出现弹窗： <el-container> <el-button type="text" @click="addMember = true">新增成员</el-button> <el-dialog :visible.sync="addM

nz-select 选择器

陈广晗

05-26

8044

前几太难用到了 nz-select选择器就在这简单的说一下把，最基本的代码 html： <div> <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose"> <nz-optio...

Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】

yuyu的博客

04-13

800

Angular 全屏后选择器 (nz-select) 下拉选择无法使用。

Angular中nz-select实现两个选择框互相关联

m0_51935008的博客

01-25

2581

两个选择框一个是版本名称一个是版本号每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.

nz-select默认值设置

03-20

nz-select 的默认值可以通过在组件中设置 nzDefaultValue 属性来实现。例如： <nz-select [nzDefaultValue]="'default'"> <nz-option nzValue="default">默认值</nz-option> <nz-option nzValue="option1">选项1...

nz-select全选

07-30

要实现nz-select的全选功能，可以在代码中添加一个全选的选项，并通过ngModel绑定一个变量来控制是否选中全选。具体的实现方式可以参考以下代码示例： ``` <nz-select style="width: 200px;" [(ngModel)]=...

帮我解释以下这段代码 <div nz-row [nzGutter]="24"> <div nz-col [nzSpan]="3"> <nz-form-item> <nz-form-control> <input nz-input name="serialNo" [(ngModel)]="serialNo" placeholder="ID" /> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="3"> <nz-form-item> <nz-form-control> <nz-select name="status" [(ngModel)]="status" nzPlaceHolder="订单状态"> <nz-option *ngFor="let productionOrderStatus of productionOrderStatusValues" [nzValue]="productionOrderStatus" [nzLabel]="'toyoApp.ProductionOrderStatus.' + productionOrderStatus | translate" > </nz-option> </nz-select> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="3"> <nz-select nzShowSearch nzAllowClear [(ngModel)]="resourceId" class="form-control" name="resourceId" nzPlaceHolder="资源"> <nz-option *ngFor="let resourceOption of resourcesSharedCollection" [nzValue]="resourceOption" [nzLabel]="resourceOption.name!"> </nz-option> </nz-select> </div> <div nz-col [nzSpan]="7"> <nz-form-item> <nz-form-control> <nz-range-picker class="form-control" [nzPlaceHolder]="['计划开工日期-开始', '计划开工日期-结束']" [(ngModel)]="date" [nzRanges]="ranges" (ngModelChange)="onConfirmDateChange($event)" > </nz-range-picker> </nz-form-control> </nz-form-item> </div> <div nz-col [nzSpan]="5"> <div class="search-area d-flex justify-content-start"> <button nz-button nzType="primary" (click)="loadPage()" [disabled]="isLoading" class="me-2">搜索</button> <button nz-button [disabled]="isLoading" (click)="resetForm()">重置</button> </div> </div> </div>

06-10

<nz-option *ngFor="let productionOrderStatus of productionOrderStatusValues" [nzValue]="productionOrderStatus" [nzLabel]="'toyoApp.ProductionOrderStatus.' + productionOrderStatus | translate"> ...

关于ngModelOptions用法总结让校验不过的验证绑定ngModel

weixin_34262482的博客

11-29

193

今天先来说说ngModelOption 我们项目用angular做了个校验标签。当输入非法的时候，会提示错误的提示框。需求两个输入框需要互动，左边的是最小字数，右边的是最大字数。左边< 右边的字数感觉很简单问题其中有一种情况是这样 1 左边先输入33，右边输入22. 2 正确情况下右边报错，我修改左边的33为3. 3 但是右边的报错没有消失我写了各种逻辑，最后发现...

固定宽度下拉列表中option内容显示不全问题解决方法

曾今拼命的想，现在却拼命的忘

10-06

4619

动态显示，在鼠标点中后显示完整的列表，离开后显示缩略的列表。公司项目中，很多页面都用到了select组件模拟树状选择框，由于树的层次可能非常多，因此的选择项内容非常长，而超出固定长度的部分被截断，无法完全看清，导致用户体验比较差，因此，要求统一修改。　　但是，树层次并非固定，而是允许用户自定义，所以组件宽度不能是定长。如果定义的长度不是足够长，而用户定义的

【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）

Dai的博客

01-06

484

【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）

记录一个关于nz-select的奇怪问题

最新发布

weixin_72233826的博客

01-24

391

最先出现的问题是下拉选择带有背景色且无法选中。后将dbname初始值改为‘‘ ，第一次可选，且下拉正常。选择后打印值为undefined后出现与最先出现的问题一样。

nz-select不能写在label标签里面

weixin_53862758的博客

03-03

405

昨天在写代码的时候，需要选择框，就用了angular的组件库ng-zorro，结果这个选择框不是不是根本没有下拉框就是点不了，前前后后试了好久也不行，有的时候突然又行了，本来以为可以了，结果又不行了，没有改代码啊，没有办法就就只能用原生的select标签了，就是这个标签原本的样式是真的丑，只能自己写css代码，写完之后不服气还是想要知道到底为什么，就又试了试，最后终于发现原来是nz-select标签不能写在label标签里面，我也不知道为什么会这样，select标签是可以写在label标签里面的，为什么nz

Angular 学习记录

weixin_44227791的博客

09-26

492

Angular 学习记录一、学习网站二、UI开源库三、常用工具四、开发环境五、VSCode 扩展六、常用命令(基于NG-ALAIN)七、基本使用八、Demo九、常用方法十、可能遇到的问题及解决办法学习Angular有一段时间了，把学习到的东西记录下来，以便忘记了能重新复习一、学习网站 HTML、CSS、JavaScript文档学习网站： https://www.runoob.com/ angular官网：https://angular.cn/. 可以看完基础知识后，学习并实践“英雄列表”的项目

ngModel与nzValue复杂场景

m0_59844638的博客

09-10

210

比如，下拉选择的应用场景中，要将用户选择的值绑定给ts中的变量name，此时ngModel（放在nzSelect中）与nzValue（放在nzOption中）相对应，与nzLabel无关。ng-antd-zorro和angular背景下，在使用select下拉选择框组件时，需同时使用到“[(ngModel)]”、“[nzLabel]”、“[nzValue]”等属性。其中有一些概念容易混淆，因此记录一下。[nzLabel]和[nzValue]这一对属于nzOption，前者是展示出来的值，后者是变量。

Angular--ng-options

冷月心的博客

04-02

1174

Angular--ng-options用途下拉菜单组成适用情形一，普通数组适用情形二（数组嵌套对象）适用情形三（普通对象）用途 ng-options属性特别的好用，可以智能的从控制器中取值当前的值做选项，用在下拉菜单里边下拉菜单组成组成就两个东西，一个是显示的东西，叫label，一个是要提交的值，叫value 以打折为例，呈递到界面的选项是五折六折七折，真正提交的是0.5,0.6,0....

angular2中，select、option，设置默认选中与获得选中项id

web

03-31

4324

在angular里，引入下拉框：(我用的ng-zorro组件库) <nz-select [(ngModel)]="selectedValue" nzPlaceHolder="Choose" style="width:300px;"> <nz-option id="nzoption" *ngFor="let option of selectedValueL...