0

我正在使用 PrimeReact 中的数据树组件，文档链接如下。树组件接收一个对象，其字段定义为

const data = [
    {
        "key": "0",
        "label": "Documents",
        "data": "Documents Folder",
        "icon": "pi pi-fw pi-inbox",
        "children": [{
            "key": "0-0",
            "label": "Work",
            "data": "Work Folder",
            "icon": "pi pi-fw pi-cog",
            "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
        },
        {
            "key": "0-1",
            "label": "Home",
            "data": "Home Folder",
            "icon": "pi pi-fw pi-home",
            "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
        }]
    }
]

这样称呼

<Tree value={data} />

icon 属性决定了在标签标签旁边呈现的符号。我想用我自己的 .png 代替可用的图标。我最初会尝试添加一个 img 标签，但这似乎不起作用。如果需要更多信息，请告诉我。

https://www.primefaces.org/primereact/#/tree

4

1 回答 1

0

尝试使用 css。在您的css文件中：

youricon{
  background-image: url('local-url');
}

所以它是这样的：

const data = [
    {
        "key": "0",
        "label": "Documents",
        "data": "Documents Folder",
        "icon": "youricon",
        "children": [{
            "key": "0-0",
            "label": "Work",
            "data": "Work Folder",
            "icon": "youricon",
            "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
        },
        {
            "key": "0-1",
            "label": "Home",
            "data": "Home Folder",
            "icon": "youricon",
            "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
        }]
    }
]

在相关说明中，请尝试使用易于使用的图标，例如FontAwesome、FeatherIcons、Octicons。如果您使用的是 primereact，它的更新版本有自己的图标primeicons。

您需要先使用以下命令安装它：npm install primeicons --save.

您可以在此处获取更多详细信息：https://www.primefaces.org/primereact/#/icons

于 2020-02-12T04:49:02.570 回答