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

BasicTree 组件无法使用自定义 #title slot #344

Closed
carl-jin opened this issue Mar 9, 2021 · 1 comment
Closed

BasicTree 组件无法使用自定义 #title slot #344

carl-jin opened this issue Mar 9, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@carl-jin
Copy link

carl-jin commented Mar 9, 2021

Describe the bug

以下代码按照antd文档, 理应能使用slot实现自定义title效果,
实际不能, 因为basicTree里面自定义了title slot, 导致无法从外部覆盖

<BasicTree
    search
    title="路由权限"
    ref="treeRef"
    :draggable="true"
  >
    <template #title="data">
      {{data}},222
    </template>
</BasicTree>

解决方法

(比较笨, 这个jsx代码我不是太熟悉, helper也没细读只能排查到这里) 望作者能给予完善下此功能
https://github.com/anncwb/vue-vben-admin/blob/9aa1be821be13168026e0a22878b12297349bbd1/src/components/Tree/src/index.vue#L304
在上面这行代码, 下面, 加个判断就行了

title: () =>
  getSlot(slots, 'title') ? (
    getSlot(slots, 'title', item)
  ) : (
    <span
      class={`${prefixCls}-title pl-2`}
      onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
    >
      {icon && <TreeIcon icon={icon} />}
      <span
        class={`${prefixCls}__content`}
        //  style={unref(getContentStyle)}
      >
        {get(item, titleField)}
      </span>
      <span class={`${prefixCls}__actions`}>
        {' '}
        {renderAction({ ...item, level })}
      </span>
    </span>
  )

其实也就是判断下, 外部如果使用了 #title slot, BasicTree 里面的title就使用外部的slot了

@carl-jin
Copy link
Author

carl-jin commented Mar 9, 2021

改成这样会好点, 能享受到basicTree里面已有的事件

title: () => (
    <span
      class={`${prefixCls}-title pl-2`}
      onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
    >
      {getSlot(slots, 'title') ? (
        <div class="title-slot">{getSlot(slots, 'title', item)}</div>
      ) : (
        <template>
          {icon && <TreeIcon icon={icon} />}
          <span
            class={`${prefixCls}__content`}
            //  style={unref(getContentStyle)}
          >
            {get(item, titleField)}
          </span>
          <span class={`${prefixCls}__actions`}>
            {' '}
            {renderAction({ ...item, level })}
          </span>
        </template>
      )}
    </span>
  )

@anncwb anncwb added the bug Something isn't working label Mar 10, 2021
@anncwb anncwb closed this as completed in ed422b7 Mar 10, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Sep 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants