# 下拉聯動組件 例如：省市區的三級聯動下拉選擇框 **首先**，聯動組件的數據來源需要有相應的層級關系 ，如 ：新建一張表`sys_test_link`，數據如下： | id | pid | name | | --- | --- | --- | | 1 | | 中國 | | 2 | 1 | 山東省 | | 3 | 2 | 濟南市 | | 4 | 3 | 歷城區 | | 5 | 3 | 長青區 | | 6 | 2 | 青島市 | | 7 | 1 | 安徽省 | | 8 | 7 | 合肥市 | | 9 | 8 | 包河區 | | 10 | 8 | 廬陽區 | | 11 | 7 | 黃山市 | | ... | | | **online配置**， 新增字段，province，city，area 在級聯下拉的第一個字段province上配置， 頁面屬性 -----> 控件類型 -----> 聯動組件 校驗字段 ----> 字典table --->配置json，格式如下 ``` { table: "sys_test_link", txt: "name", key: "id", linkField: "city,area", idField: "id", pidField: "pid", condition:"pid = '1'" } ``` 配置描述： | 名稱 | 描述 | | --- | --- | | table | 數據庫表名 | | txt | 控件顯示的值 | | key | 控件需要存儲的值 | | linkField | 級聯組件的其他字段名稱，上例配置了市，區字段名 | | idField | 數據的標識 | | pidField | 上下級關系的表示字段 | | condition | 聯動組件 第一個下拉框的數據查詢條件 | ## 示例： 1. 配置三個字段  2. 配置第一個為聯動控件  3. 配置聯動參數 ``` { table: "sys_test_link", txt: "name", key: "id", linkField: "city,area", idField: "id", pidField: "pid", condition: "pid= '1'" } ```  測試效果：