技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/UPQhl7yG06tksqj5rkpXaQj3eAO6yA02XkpyhkoX.jpg)
](https://wwads.cn/click/bundle?code=rj1sGC1a4OL9EZHJYkOcZnZecLZrnV)

[🚀 支持40+常用图表，20+主流数据源，拖拉拽制作数据大屏。**开源免费，支持二开**。](https://wwads.cn/click/bundle?code=rj1sGC1a4OL9EZHJYkOcZnZecLZrnV)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端左侧查询树
=======

![](https://minio.pigx.top/oss/202304/1681633931.png)

```


`<query-tree  :query="state.queryList"  @node-click="handleNodeClick">  </query-tree>`




```

```


`const  QueryTree  =  defineAsyncComponent(   ()  =>  import("/@/components/QueryTree/index.vue")  );  
const state =  reactive({   queryList:  (name:  String)  =>  {   return  api({  name: name,   });   },  });  
const  handleNodeClick  =  (e:  any)  =>  {};`




```

[](#卡槽扩展)卡槽扩展
-------------

```


`<query-tree>   <template  #default="{ node, data }">  </template>  </query-tree>`




```

[](#属性说明)属性说明
-------------

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 

`props`

 | 

`Object`

 | 

`{ label: 'name', children: 'children', value: 'id' }`

 | 

树形结构的属性配置。

 |
| 

`placeholder`

 | 

`String`

 | 

`''`

 | 

输入框的占位符。

 |
| 

`loading`

 | 

`Boolean`

 | 

`false`

 | 

是否显示加载状态。

 |
| 

`query`

 | 

`Function`

 | 

 | 

包含查询方法的函数，必须返回 Promise 类型的数据，并在组件中被调用。

 |

### 本页导航

卡槽扩展

属性说明