📄 前端左侧查询树

#

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