**JTreeSelect树形下拉框 (异步加载)** [TOC] > 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件 ## 组件参数 | 参数 | 类型 | 必填 |说明| |--------------|---------|----|---------| | placeholder |string | | placeholder | | disabled |Boolean | | 是否禁用 | | multiple |Boolean | | 是否多选 | | dict |string | | 表名,显示字段,存储字段 拼接的字符串 | | pidField |string | | 指定父级节点的字段 默认pid| | pidValue |string | | 指定父级节点的id值 不指定则默认为 0 不可以为空，若为空请自行修改数据库 | | condition |string(json字符串) | | 支持自定义查询条件，进行过滤数据，请按此标准示例赋值：condition='{"create_by":"admin"}' | | hasChildField | string | | 指定是否含有子节点的字段（默认不传），控制是否显示展开箭头（1=有，0=没有） | | loadTriggleChange?| Boolean | false| | ## 效果展示  ## 使用示例 ``` <template> <a-form> <a-row :gutter="24"> <a-col :lg="8"> <a-form-item label="下拉树多选示例" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <JTreeSelect v-model:value="value" dict="sys_permission,name,id" pidField="parent_id" multiple/> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="下拉树多选数值" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <span>{{value}}</span> </a-form-item> </a-col> </a-row> </a-form> </template> <script lang="ts" setup> import {ref} from 'vue' import {JTreeSelect} from '/@/components/Form'; const value= ref('') </script> ```