云筑文档（桌面端）

本文档使用 MrDoc 发布

树查询面板

## treequery 树查询面板
树查询
### 何时使用
当需查询时
### 应用背景
### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_093938_567057.png)

------------

------------
代码示例如下
```html
<template>
    <div style="height:200px;">
        <hi-tree-query :datas="datas" :idField="FID" :valueField="FVALUE" :descField="FDESC" :pidField="FPID" :targetField="FTarget" :root="root"></hi-tree-query>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                FID: "FGUID",
                FPID: "FPID",
                FDESC: "FNAME",
                FVALUE: "FNUMBER",
                FTarget:"FTarget",
                root: "-1",
                datas: [{
                        "FGUID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FPID": "-1",
                        "FC5": "产品类别",
                        "FNAME": "化纤",
                        "FTarget": "FName",
                        "FNUMBER": "1",
                        "FI1": 1
                    },
                    {
                        "FGUID": "7CCEF98D-2A4B-4EE4-92BC-7AB6806E8E2B",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "粘胶",
                        "FNUMBER": "1001",
                        "FI1": 2
                    }, {
                        "FGUID": "E574F3AE-8ECF-4EDA-904D-32051F67FF73",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "涤纶纤维",
                        "FNUMBER": "1002",
                        "FI1": 3
                    }, {
                        "FGUID": "29B660B8-45E2-4A7B-81FA-0460E666356C",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "绵纶纤维",
                        "FNUMBER": "1003",
                        "FI1": 4
                    }, {
                        "FGUID": "6A608278-3ECD-46E5-B411-AD3B571ADF91",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "维纶纤维",
                        "FNUMBER": "1004",
                        "FI1": 5
                    }, {
                        "FGUID": "36548671-16DB-4CEB-BF8B-F5C79625C868",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "氨纶纤维",
                        "FNUMBER": "1005",
                        "FI1": 6
                    }, {
                        "FGUID": "6FDD94C4-FD69-4DBF-9135-B36EFF5A6B13",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "再生纤维",
                        "FNUMBER": "1006",
                        "FI1": 7
                    }, {
                        "FGUID": "2C491DD8-C42F-44A6-A10B-D565C23597A5",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "丙纶纤维",
                        "FNUMBER": "1007",
                        "FI1": 8
                    }, {
                        "FGUID": "7CCEF98D-2A4B-4EE4-92BC-7AB6806E8E2B",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "粘胶",
                        "FNUMBER": "1001",
                        "FI1": 2
                    }, {
                        "FGUID": "E574F3AE-8ECF-4EDA-904D-32051F67FF73",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "涤纶纤维",
                        "FNUMBER": "1002",
                        "FI1": 3
                    }, {
                        "FGUID": "29B660B8-45E2-4A7B-81FA-0460E666356C",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "绵纶纤维",
                        "FNUMBER": "1003",
                        "FI1": 4
                    }, {
                        "FGUID": "6A608278-3ECD-46E5-B411-AD3B571ADF91",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "维纶纤维",
                        "FNUMBER": "1004",
                        "FI1": 5
                    }, {
                        "FGUID": "36548671-16DB-4CEB-BF8B-F5C79625C868",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "氨纶纤维",
                        "FNUMBER": "1005",
                        "FI1": 6
                    }, {
                        "FGUID": "6FDD94C4-FD69-4DBF-9135-B36EFF5A6B13",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "再生纤维",
                        "FNUMBER": "1006",
                        "FI1": 7
                    }, {
                        "FGUID": "2C491DD8-C42F-44A6-A10B-D565C23597A5",
                        "FPID": "7579F723-61E3-4357-ACB5-6AFD5F4C60F4",
                        "FC5": "产品类别",
                        "FNAME": "丙纶纤维",
                        "FNUMBER": "1007",
                        "FI1": 8
                    }, {
                        "FGUID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FPID": "-1",
                        "FC5": "产品类别",
                        "FNAME": "棉纺",
                        "FNUMBER": "2",
                        "FI1": 9
                    },
                    {
                        "FGUID": "4FB69298-2680-41AA-AB6E-D52226E3E0AC",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "纯棉纱",
                        "FNUMBER": "2001",
                        "FI1": 10
                    }, {
                        "FGUID": "E41911DE-7BFC-4C3E-8356-7315D2832667",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "混棉纱",
                        "FNUMBER": "2002",
                        "FI1": 11
                    }, {
                        "FGUID": "BF261B52-1144-470B-9C29-03131F66073E",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "纯纤维纱",
                        "FNUMBER": "2003",
                        "FI1": 12
                    }, {
                        "FGUID": "4FB69298-2680-41AA-AB6E-D52226E3E0AC",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "纯棉纱",
                        "FNUMBER": "2001",
                        "FI1": 10
                    }, {
                        "FGUID": "E41911DE-7BFC-4C3E-8356-7315D2832667",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "混棉纱",
                        "FNUMBER": "2002",
                        "FI1": 11
                    }, {
                        "FGUID": "BF261B52-1144-470B-9C29-03131F66073E",
                        "FPID": "EAC7A7B1-2EF8-4F2F-8821-353497BC3F88",
                        "FC5": "产品类别",
                        "FNAME": "纯纤维纱",
                        "FNUMBER": "2003",
                        "FI1": 12
                    }, {
                        "FGUID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FPID": "-1",
                        "FC5": "产品类别",
                        "FNAME": "织造",
                        "FNUMBER": "3",
                        "FI1": 13,
                    }, {
                        "FGUID": "14BD9A44-0F9C-44C0-AAA6-60A15A56938B",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "机织",
                        "FNUMBER": "3001",
                        "FI1": 14
                    }, {
                        "FGUID": "7E0CFB2C-F23B-4A4E-870B-C766BE132468",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "针织",
                        "FNUMBER": "3002",
                        "FI1": 15
                    }, {
                        "FGUID": "FD4DA762-101E-4806-8C5A-3AF68CBAA249",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "非织造布",
                        "FNUMBER": "3003",
                        "FI1": 16
                    }, {
                        "FGUID": "14BD9A44-0F9C-44C0-AAA6-60A15A56938B",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "机织",
                        "FNUMBER": "3001",
                        "FI1": 14
                    }, {
                        "FGUID": "7E0CFB2C-F23B-4A4E-870B-C766BE132468",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "针织",
                        "FNUMBER": "3002",
                        "FI1": 15
                    }, {
                        "FGUID": "FD4DA762-101E-4806-8C5A-3AF68CBAA249",
                        "FPID": "8DE928EE-BA40-45C5-B878-E356520DF52D",
                        "FC5": "产品类别",
                        "FNAME": "非织造布",
                        "FNUMBER": "3003",
                        "FI1": 16
                    }, {
                        "FGUID": "8025F24A-836C-47D6-96C2-E7D87601DF66",
                        "FPID": "-1",
                        "FC5": "产品类别",
                        "FNAME": "印染",
                        "FNUMBER": "4",
                        "FI1": 17,
                    }, {
                        "FGUID": "1BE82B36-C063-41AD-BCE4-26D0EEB1C716",
                        "FPID": "8025F24A-836C-47D6-96C2-E7D87601DF66",
                        "FC5": "产品类别",
                        "FNAME": "针织印染",
                        "FNUMBER": "4001",
                        "FI1": 18
                    }, {
                        "FGUID": "D4CA38FA-A94A-47FF-B7F9-6E267104626E",
                        "FPID": "8025F24A-836C-47D6-96C2-E7D87601DF66",
                        "FC5": "产品类别",
                        "FNAME": "机织印染",
                        "FNUMBER": "4002",
                        "FI1": 19
                    }, {
                        "FGUID": "1BE82B36-C063-41AD-BCE4-26D0EEB1C716",
                        "FPID": "8025F24A-836C-47D6-96C2-E7D87601DF66",
                        "FC5": "产品类别",
                        "FNAME": "针织印染",
                        "FNUMBER": "4001",
                        "FI1": 18
                    }, {
                        "FGUID": "D4CA38FA-A94A-47FF-B7F9-6E267104626E",
                        "FPID": "8025F24A-836C-47D6-96C2-E7D87601DF66",
                        "FC5": "产品类别",
                        "FNAME": "机织印染",
                        "FNUMBER": "4002",
                        "FI1": 19
                    }, {
                        "FGUID": "4808F53A-7654-4548-8C16-6F83A741741E",
                        "FPID": "-1",
                        "FC5": "产品类别",
                        "FNAME": "服装",
                        "FNUMBER": "5",
                        "FI1": 20,
                    }
                ]

};
        },
        methods: {

}
    };
</script>
```

</div>

### Attributes

| 参数          | 说明            | 类型     | 可选值                   | 默认值 |
|-------------|---------------|--------|-----------------------|-----|
| datasource  | 字段类别数据集       | String | —                     |     |
| pidField    | 父节点字段ID       | String | —                     |     |
| idField     | 节点字段ID        | String | —                     |     |
| descField   | 描述字段ID        | String | —                     |     |
| targetField | 目标字段ID        | String | —                     |     |
| root        | 根节点ID         | String | —                     | -1  |
| datas       | 字段类别数据集合      | Array  | —                     | -1  |
| size        | 用于控制该表单内组件的尺寸 | string | medium / small / mini |     |
| target      | 查询目标          | Object | —                     |     |

### Events

| 事件名称        | 说明  | 回调参数        |
|-------------|-----|-------------|
| beforequery | 查询前 | param(查询参数) |
| afterquery  | 查询后 | param(查询参数) |

<style>
.textDiv{
border:1px solid #F5F5F5;
padding: 20px 35px;
border-radius: 4px;
}
.textDiv:hover{
border-color:#1890ff;
}

</style>

admin 2024年4月30日 09:40 收藏文档

上一篇

下一篇