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

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

Open
5 tasks done
Star-tears opened this issue Apr 12, 2024 · 4 comments · May be fixed by #5872
Open
5 tasks done

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

Star-tears opened this issue Apr 12, 2024 · 4 comments · May be fixed by #5872
Labels
untriaged need to sort

Comments

@Star-tears
Copy link

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

@Star-tears Star-tears added the untriaged need to sort label Apr 12, 2024
@jahnli
Copy link
Collaborator

jahnli commented Apr 12, 2024

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

@jizai1125
Copy link
Contributor

@Star-tears
Copy link
Author

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

@jizai1125
Copy link
Contributor

jizai1125 commented Apr 15, 2024

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

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

Successfully merging a pull request may close this issue.

3 participants