JLC Docs
PIG
AI
PIG
AI

前端左侧查询树

QueryTree 是一个带搜索功能的左侧查询树组件，支持异步加载数据和自定义节点渲染。

查询树组件效果图

基础用法

<query-tree :query="state.queryList" @node-click="handleNodeClick">
</query-tree>
import { defineAsyncComponent, reactive } from 'vue'

const QueryTree = defineAsyncComponent(
  () => import("/@/components/QueryTree/index.vue")
);

const state = reactive({
  queryList: (name: String) => {
    return api({
      name: name,
    });
  },
});

const handleNodeClick = (e: any) => {};
异步数据加载

query 属性必须返回 Promise 类型的数据，组件会自动处理加载状态。

卡槽扩展

通过默认插槽可以自定义树节点的渲染方式。

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

属性说明

属性类型默认值说明
propsObject{ label: 'name', children: 'children', value: 'id' }树形结构的属性配置。
placeholderString''输入框的占位符。
loadingBooleanfalse是否显示加载状态。
queryFunction包含查询方法的函数，必须返回 Promise 类型的数据，并在组件中被调用。
本页目录