**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> ```