nz-select下拉框自适应宽度

原文链接：nz-select下拉框自适应宽度 – 每天进步一点点

数据如下：

listOfData=[

{

"name":"标题1",

"id":"1"

},

{

"name":"标题12",

"id":"2"

},

{

"name":"标题123",

"id":"3"

},

{

"name":"标题1234",

"id":"4"

},

{

"name":"标题12345",

"id":"5"

},

]

<nz-select

 

>

<nz-option

*ngFor="let item of listOfData"

[nzLabel]="item.name"

[nzValue]="item.id"

>

</nz-option>

</nz-select>

使用nz-select时，如果没有指定宽度就会是下面的样子：

如果设置宽度是80px,那么就会变成这样：

<nz-select

style="width: 80px;"

>

<nz-option

*ngFor="let item of listOfData"

[nzLabel]="item.name"

[nzValue]="item.id"

>

</nz-option>

</nz-select>

如果宽度设置成300px，就会变成下面这样：

可以看出，如果宽度设置过长就浪费了很多空间，如果设置了过短就无法显示部分数据。所以我们需要设置自适应宽度。

代码如下：

<nz-select

[nzDropdownStyle]="{

width: 'fit-content',

'min-width': '80px'

}"

style="min-width: 80px;"

>

<nz-option

*ngFor="let item of listOfData"

[nzLabel]="item.name"

[nzValue]="item.id"

>

</nz-option>

</nz-select>

通过设置最小宽度80px, 然后设置宽度自适应即可。