tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.

Home Page:https://www.naiveui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

tree组件同时使用render-prefix和on-update:expanded-keys渲染前缀时后者不生效

Star-tears opened this issue · comments

Describe the bug

tree组件同时使用render-prefix和on-update:expanded-keys渲染前缀时后者不生效,由于并不希望在数据部分写prefix,所以要用到render-prefix,但同时希望在展开时切换图标,此时on-update:expanded-keys绑定的函数切换图标不生效。或者说有什么技巧能解决我现在的需求,谢谢告知。

Steps to reproduce

const updatePrefixWithExpaned = (
  _keys: Array<string | number>,
  _option: Array<TreeOption | null>,
  meta: {
    node: TreeOption | null;
    action: 'expand' | 'collapse' | 'filter';
  }
) => {
  if (!meta.node) return;
  switch (meta.action) {
    case 'expand':
      console.log('ex');
      meta.node.prefix = () =>
        h(NIcon, null, {
          default: () => h(FolderOpenOutline)
        });
      break;
    case 'collapse':
      meta.node.prefix = () =>
        h(NIcon, null, {
          default: () => h(Folder)
        });
      break;
  }
};

const renderPrefix = ({
  option,
  checked,
  selected
}: {
  option: TreeOption;
  checked: boolean;
  selected: boolean;
}) => {
  if (option.children && option.children.length > 0)
    return h(NIcon, null, {
      default: () => h(Folder)
    });
  return h(NIcon, null, {
    default: () => h(FileTrayFullOutline)
  });
};

Link to minimal reproduction

System Info

Used Package Manager

yarn

Validations

请提供一个在线的最小复现链接

https://codesandbox.io/p/sandbox/wonderful-tree-3g9jv9
如这个例子这里:
image
但期望的效果应该像官方文档那样文件夹图标切换为打开状态:
image

同时使用确实不行,update:expand-keys 事件在 render-prefix 之前触发的
只能把 render-prefix 改成在数据层面构造 prefix