antd vue Cascader多选设置suffixIcon无效

原创已于 2023-01-09 17:02:28 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-01-09 17:01:23 首次发布

vuejs 专栏收录该内容

97 篇文章

订阅专栏

文章描述了在Vue应用中遇到Cascader组件插槽显示不正确的问题，官方建议使用插槽解决，但实际操作后发现无效。解决方案是首先设置`showArrow=true`以确保图标显示，然后通过`<template#suffixIcon>`自定义图标，例如使用`<DownOutlined/>`替换默认箭头。

官方方案，可以用插槽来解决。

但是，无效。

解决方法

先设置 :showArrow="true"，因为你得先有这个icon，才能再改

再写入icon slot

<a-cascader
     v-model:value="value"
     multiple
     :options="options"
     placeholder="请选择"
     @change="onchange"
     :showArrow="true">
   <template #suffixIcon><DownOutlined /></template>
</a-cascader>