Ant-design-vue: tree组件的title,key可否自定义

[wkmian]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

目前没有找到简单有效的方式控制tre组件显示的title,key值。目前的做法需要遍历修改后台返回的数据增加scopedSlots并添加template处理，这种方式不方便且存在和后台命名冲突的可能性。或者自己写一个递归，实现自定义的小效果。能否增加两个属性（最好可以支持格式化，title可能是对个字段拼接的），专门配置tree组件的title,key的值。

What does the proposed API look like?

vue 3.4.1

[luyu1314]

同问

[liuqingchao]

是否可以对标Element-UI树控件的自定义节点内容功能？

[tangjinzhou]

是否可以对标Element-UI树控件的自定义节点内容功能？

一直都有 仔细看文档

[zzzz-Z]

我自己对tree组件的强化封装 解决了上述问题 可以参考一下

import { Component } from 'vue-property-decorator'
import { VC } from '@/VC-vue'
import _ from 'lodash';

interface Props extends Partial<Tree> {
  /** 节点key字段(唯一值) 默认为key */
  nodeKey?: string
  /** 递归的节点字段 默认为children */
  nextLevelKey?: string
  titleRender?(v: any): JSX.Element | string
  iconRender?(v: any): JSX.Element | undefined

}

export const ITree = ({ props, data }: FC<Props>) => {

  const { titleRender, iconRender, treeData, nodeKey, nextLevelKey, showIcon } = props!
  const child = nextLevelKey || 'children'
  const icon = (r) => showIcon && iconRender && iconRender(r)
  const title = (r) => titleRender ? titleRender(r) : r.title
  @Component({})
  class VcTree extends VC {
    get TreeNodes() {
      const renderNode = (arr: any[]) =>
        arr.map((r) => (
          <a-tree-node
            {...r}
            key={r[nodeKey || 'key']}
            title={title(r)}
            icon={icon(r)} >
            {r[child] && renderNode(r[child])}
          </a-tree-node>
        ))
      return renderNode(treeData!)
    }

    render() {
      props = _.omit(props, 'treeData')
      return (
        <a-tree {...{ on: data!.on, props }}   >
          {this.TreeNodes}
        </a-tree>
      )
    }
  }

  return <VcTree />

}

[liuqingchao]

是否可以对标Element-UI树控件的自定义节点内容功能？

一直都有 仔细看文档

没看到啊，用slot方式好像不行啊

[leaf1992]

是否可以对标Element-UI树控件的自定义节点内容功能？

一直都有 仔细看文档
文档里没找到怎么用的，可以请教下吗？

[leaf1992]

同问

你好，你解决了吗

[wkmian]

同问

你好，你解决了吗

暂时没有官方的解决方案，我是自己写了一个函数根据自己的需要生成tree的options参数

[leaf1992]

我也没找到官方的解决方案，我是用递归重新生成了title和key

在 2019-04-24 16:28:57，"wkmian" [e-mail] 写道：

同问

你好，你解决了吗

暂时没有官方的解决方案，我是自己写了一个函数根据自己的需要生成tree的options参数

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[liuqingchao]

最新的官方文档提供了解决方案，比如单个node结构定义如下：
var node = { key: xxx, title: xxx, scopedSlots: { title: 'nodeTitle' } }
使用组件时：
<a-tree :treeData="xxx"> <span slot="nodeTitle" slot-scope="rec">这里自有发挥</span> </a-tree>

[chaegumi]

有效果了，是a-directory-tree不行，a-tree可以

[li1224632854]

有没有官方的例子 就一句仔细看文档？

[wuchang]

最新的官方文档提供了解决方案，比如单个node结构定义如下：
var node = { key: xxx, title: xxx, scopedSlots: { title: 'nodeTitle' } }
使用组件时：
<a-tree :treeData="xxx"> <span slot="nodeTitle" slot-scope="rec">这里自有发挥</span> </a-tree>

这需要修改数据源结构，也不妥

[wuchang]

是否可以对标Element-UI树控件的自定义节点内容功能？

一直都有 仔细看文档

treenode有，但tree没有

[fancyboynet]

请问slots/scopedSlots 的详细说明有吗，对象里的key和value分别代表啥意思啊

[tangchi695]

讲道理，有朋友能告诉我目录树怎么自定义图标吗？

[zkwolf]

讲道理，有朋友能告诉我目录树怎么自定义图标吗？

https://codesandbox.io/s/vue-antd-template-dy58e

[tangchi695]

讲道理，有朋友能告诉我目录树怎么自定义图标吗？

https://codesandbox.io/s/vue-antd-template-dy58e
原来如此，谢谢。