online表单下拉树控件![](https://img.kancloud.cn/cd/81/cd818217b88adcb802df22d595a5a925_789x662.png) 使用场景:当表单值改变的时候,获取表单值,后台根据该表单值重新加载树的数据。 `@date:2022/11/08` 效果演示: ![](https://img.kancloud.cn/ea/99/ea995cfb6f1cce927c3a9d1880284ae5_994x691.png) >[info] 1.这里重新加载需要自定义一个请求用于获取数据 > 2.请求返回的数据结构参考后台实体类:org.jeecg.modules.system.model.TreeSelectModel js增强定义: ``` loaded(){ this.$nextTick(()=>{ let url = '/test/tree/loadTreeData'; //获取当前wenben输入框的值 let value = event.value; let params = {wenben: value}; //此处的cust_tree为下拉树的字段名 this.updateSchema({ field: 'cust_tree', componentProps: { url: url, params: params } }) }) } onlChange(){ return { wenben(){ let url = '/test/tree/loadTreeData'; //获取当前wenben输入框的值 let value = event.value; let params = {wenben: value}; //此处的cust_tree为下拉树的字段名 this.updateSchema({ field: 'cust_tree', componentProps: { url: url, params: params } }) } } } ``` java请求定义: ~~~ @GetMapping("/loadTreeData") public Result<List<TreeSelectModel>> loadTreeData(HttpServletRequest request) { Result<List<TreeSelectModel>> result = new Result<List<TreeSelectModel>>(); // 此处模拟json,见下方test.json, 实际根据参数自行查询 String jsonData = oConvertUtils.readStatic("classpath:static/test/test.json"); JSONObject json = JSONObject.parseObject(jsonData); JSONArray array = json.getJSONArray("data"); List<TreeSelectModel> list = array.toJavaList(TreeSelectModel.class); result.setSuccess(true); result.setResult(list); return result; } ~~~ test.json: ~~~ { "data": [ { "title": "安徽省", "value": "1", "leaf": false, "children": [ { "title": "合肥市", "value": "11", "leaf": false, "children": [ { "title": "A区", "value": "111", "leaf": true }, { "title": "B区", "value": "112", "leaf": true }, { "title": "C区", "value": "113", "leaf": true } ] }, { "title": "芜湖市", "value": "12", "leaf": false, "children": [ { "title": "D区", "value": "121", "leaf": true }, { "title": "E区", "value": "122", "leaf": true } ] } ] }, { "title": "河南省", "value": "2", "leaf": false, "children": [ { "title": "郑州市", "value": "21", "leaf": false, "children": [ { "title": "X区", "value": "211", "leaf": true }, { "title": "Y区", "value": "212", "leaf": true }, { "title": "Z区", "value": "213", "leaf": true } ] }, { "title": "洛阳市", "value": "22", "leaf": false, "children": [ { "title": "O区", "value": "221", "leaf": true }, { "title": "P区", "value": "222", "leaf": true } ] } ] } ] } ~~~ >[warning]注意: 如果自定义请求的数据和online控件配置的树的数据不是一张表,那么通过此方法录入的数据,不会在列表上自动显示具体的文本,需要通过java增强(查询)来实现列表数据显示的转换。