Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

auto-complete 组件无法使用option 或 options 等slot自定义下拉菜单 #7396

Closed
1 task
zhou-ouha opened this issue Mar 2, 2024 · 9 comments
Closed
1 task

Comments

@zhou-ouha
Copy link

zhou-ouha commented Mar 2, 2024

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.1.0

Environment

vue@3.4.0 TS@5.3.3 ant-design-vue@4.1.2 edge@122.0.2365.59

Reproduction link

https://antdv.com/components/auto-complete-cn

Steps to reproduce

使用文档中说明的 option slot 或使用TS中定义的options slot 自定义下拉菜单的选项
https://codesandbox.io/p/sandbox/priceless-galois-3mhq5c

What is expected?

自定义菜单项,希望菜单项前面有一个选中图标

What is actually happening?

使用 option slot , TS会检查 option 这个slot不存在,在源码导出的几种 slot的类型,没有option
使用 options slot ,antdv 会报错 Warning: [ant-design-vue: AutoComplete] options' slot is deprecated, please use props "options"
instead

@zhou-ouha
Copy link
Author

@selicens

@selicens
Copy link
Member

selicens commented Mar 5, 2024

https://www.antdv.com/components/auto-complete-cn#components-auto-complete-demo-options
可以参照官网自定义选项demo使用,我使用vue3.4.21,ant-design-vue4.1.2是可以达到你的目的
image

@zhou-ouha
Copy link
Author

image

image

我使用官方文档这种自定义模式,TS会提示类型错误,同时通过源码查看导出的 slot 类型,并不支持 option 字段

@zhou-ouha
Copy link
Author

image
image

使用 options 字段也是根据源码中的逻辑来的,但是会提示我该字段已废弃

@selicens
Copy link
Member

selicens commented Mar 5, 2024

我再确认下

selicens added a commit to selicens/ant-design-vue that referenced this issue Mar 5, 2024
@Diven-xinhai
Copy link

Diven-xinhai commented Mar 8, 2024

我再确认下
你好,我本意的功能是想要自定义下拉选项,效果如下:
image
所以使用option插槽实现,但是ts检测类型报错,如果按照上述方式修改后就并不能实现自定义下拉选项,而是把我插槽自定义的内容给过滤掉了,效果如官网介绍一样,我看了下源码,在下方把options给过滤掉了,所以不能展示自定义内容
image
目前我的方法是把slots中ts类型增加了option类型,如下方所示:
image
即解决了ts类型报错,又保留了插槽的作用。
其实目前我比较疑惑的option与options的用法在官网与代码中的含义好像有些冲突,我不是很理解这两者到底需要我怎么用,或者正确使用

@selicens
Copy link
Member

selicens commented Mar 8, 2024

我再确认下
你好,我本意的功能是想要自定义下拉选项,效果如下:
image
所以使用option插槽实现,但是ts检测类型报错,如果按照上述方式修改后就并不能实现自定义下拉选项,而是把我插槽自定义的内容给过滤掉了,效果如官网介绍一样,我看了下源码,在下方把options给过滤掉了,所以不能展示自定义内容
image
目前我的方法是把slots中ts类型增加了option类型,如下方所示:
image
即解决了ts类型报错,又保留了插槽的作用。
其实目前我比较疑惑的option与options的用法在官网与代码中的含义好像有些冲突,我不是很理解这两者到底需要我怎么用,或者正确使用

一个bug,其实应该是option,源码中使用了options,而option插槽能正确生效的原因是给select组件透传了option,select也有这个同名的插槽

@Diven-xinhai
Copy link

我再确认下
你好,我本意的功能是想要自定义下拉选项,效果如下:
image
所以使用option插槽实现,但是ts检测类型报错,如果按照上述方式修改后就并不能实现自定义下拉选项,而是把我插槽自定义的内容给过滤掉了,效果如官网介绍一样,我看了下源码,在下方把options给过滤掉了,所以不能展示自定义内容
image
目前我的方法是把slots中ts类型增加了option类型,如下方所示:
image
即解决了ts类型报错,又保留了插槽的作用。
其实目前我比较疑惑的option与options的用法在官网与代码中的含义好像有些冲突,我不是很理解这两者到底需要我怎么用,或者正确使用

一个bug,其实应该是option,源码中使用了options,而option插槽能正确生效的原因是给select组件透传了option,select也有这个同名的插槽

抱歉,是我没表述清晰,我的意思是option的目的是可以自定义插槽吗?如果是那我明白了,因为我看在omit中把options过滤掉了,再结合你上述修改,把omit中的options改为了option,那还是无法实渲染自定义插槽中的元素,所以导致我迷惑了

@selicens
Copy link
Member

selicens commented Mar 8, 2024

我再确认下
你好,我本意的功能是想要自定义下拉选项,效果如下:
image
所以使用option插槽实现,但是ts检测类型报错,如果按照上述方式修改后就并不能实现自定义下拉选项,而是把我插槽自定义的内容给过滤掉了,效果如官网介绍一样,我看了下源码,在下方把options给过滤掉了,所以不能展示自定义内容
image
目前我的方法是把slots中ts类型增加了option类型,如下方所示:
image
即解决了ts类型报错,又保留了插槽的作用。
其实目前我比较疑惑的option与options的用法在官网与代码中的含义好像有些冲突,我不是很理解这两者到底需要我怎么用,或者正确使用

一个bug,其实应该是option,源码中使用了options,而option插槽能正确生效的原因是给select组件透传了option,select也有这个同名的插槽

抱歉,是我没表述清晰,我的意思是option的目的是可以自定义插槽吗?如果是那我明白了,因为我看在omit中把options过滤掉了,再结合你上述修改,把omit中的options改为了option,那还是无法实渲染自定义插槽中的元素,所以导致我迷惑了

我的更改犯了和之前一样的错误,稍后纠正

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants