vue3 antd 树选择组件 自定义展开折叠收拢图标

115 阅读1分钟

image.png

<a-tree-select
  class="catalogue-tree"
  v-model:value="selectValue"
  placeholder="请选择目录"
  tree-default-expand-all
  :bordered="false"
  :field-names="fieldNames"
  :dropdownMatchSelectWidth="false"
  :dropdown-style="{ width:'224px',maxHeight: '304px',overflow: 'auto' }"
  :tree-data="catalogueList"
  :switcherIcon="
  h(DownOutlined, {
  class: 'ant-select-tree-switcher-icon',
  })"
  :getPopupContainer="
    (triggerNode) => {
      return triggerNode.parentNode || document.body;
    }
  "
  >
    <template #title="{ title }">
      <div class="flex items-center">
        <img :src="folderIcon" class="folder-icon w-[18px] h-[14px] me-[6px]" alt=""/>
        <div class="whitespace-nowrap" :title="title">{{ title }}</div>
      </div>
    </template>
  </a-tree-select>
// 隐藏 当前选中条目前的icon
.catalogue-tree .ant-select-selection-item .folder-icon {
  display: none;
}
  1. 查看官方文档没有发现可以修改自定义图标的属性,多方查资料以及请教前辈师傅发现加switcherIcon属性可以修改
  2. 还有个问题,就是下拉菜单中的文件夹图标会联动,如果下拉菜单选项中有图标,当选择菜单项时,选中的条目也会有图标,没查到什么好的解决办法,可以直接样式隐藏