技术文档

打开导航菜单

PIG AI Guide

切换主题搜索

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

🚀 支持40+常用图表，20+主流数据源，拖拉拽制作数据大屏。开源免费，支持二开。广告

PIGX 技术指南

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

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端左侧查询树



`<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 类型的数据，并在组件中被调用。

本页导航

卡槽扩展

属性说明

9.md 2.0 KB Постоянная ссылка История Исходник