下拉联动组件 === 例如:省市区的三级联动下拉选择框 **首先**,联动组件的数据来源需要有相应的层级关系,例如,分类字典表的数据结构,id和pid可以将整张表的上下级关系串起来。 **配置**, 新增字段,province,city,area 在级联下拉的第一个字段province上配置, 页面属性 -----> 控件类型 -----> 联动组件 校验字段 ----> 字典table --->配置json,格式如下 ``` { table: "sys_category", txt: "name", key: "id", linkField: "city,area", idField: "id", pidField: "pid", condition:"code = 'A01'" } ``` 配置描述: | 名称 |描述 | | --- | --- | | table | 数据库表名 | | txt | 控件显示的值 | | key |控件需要存储的值 | | linkField |级联组件的其他字段名称,上例配置了市,区字段名 | | idField | 数据的标识 | | pidField | 上下级关系的表示字段 | | condition| 查询条件,只是第一个级联下拉框的数据筛选条件 | ## 示例: 1. 配置三个字段 ![](https://img.kancloud.cn/4c/62/4c62535b577e6bb219ca3172c52d37e0_1141x547.png) 2. 配置第一个为联动控件 ![](https://img.kancloud.cn/d1/44/d1441f2f7c76b97598d0e31895186990_955x523.png) 3. 配置联动参数 ``` { table: "sys_category", txt: "name", key: "id", linkField: "city,area", idField: "id", pidField: "pid", condition: "code = 'B03'" } ``` ![](https://img.kancloud.cn/f2/d1/f2d1332c7694fa32ad43379c3ea2a098_1139x546.png)