在使用select选择器组件时候发现一个问题,那就是如果选择器宽度不够的时候,列项是不会完全显示的
这样在做选择的时候,没有明确自己选择的到底是哪个,就像上图一样,前缀都是一样的情况下无法选择
解决这个问题主要有两种方法:
1.第一种方法很容易想到,那就加宽选择器的宽度 ,这是最容易做到的需要调节一下布局就可以了
但是这样还是会存在一些瑕疵,
1第一是宽加的太长的情况下可能挤占了其他元素的位置
2加入只有一项非常宽的列项则可能样式不好看
3 .永远无法预测未来最宽选择列有多宽
2,第二种方法这是根据一个Title 提示功能,但是ant design 只是给对于已经选择好了的项给与titile的提示,就是说如果列项很长,无法查看你可以先选择,在移动到选择器上,弹出提示title,显示完整的信息,ant design 并不提供对于未选择列项的title提示
对于还没选择的列表项的时候是没有任务title提示的。
我找了很久都没有找到如何解决这个问题的文章,最后看到了一个老哥的清奇解决思路,既然UI框架不提供,为啥不跳过nz-option选择器的提供的方法属性,可以在nz-option标签对象中自己添加 titile 标签,提示标签
这个时候有一个关键的属性 nzCustomContent 在nz-option中使用这个属性使得可以是使用自定义的数据渲染方法用在选择器上
这个时候就做到列宽太长无法提示的功能,相当于自己加入一个提示
这样就可以完美的解决列太宽无法查看的问题,而且也不再需要将列宽设置的很长的问题
解决了这个问题,就将这个问题分享出来,希望大家遇到这个问题可以快速解决