要求实现三个带搜索的 下拉框 的三级联动, element 里的下拉框带搜索,可以实现,就是三级联动需要自己实现

给到 三个接口,1,获取小区list 

                          2, 获取该小区楼栋号

                          3,获取楼栋下的房间号

实现如下:

因为涉及到回填,所以 页面一加载就要获取 url 的小区id,

mounted 发起请求, 请求所有小区, 所有小区赋值给 this.villagList ,

(!!! 在请求的里获取url里的小区编号,不然会出现 小区的下拉框只会出现value,不会更新为该value所指向的label !!!)

 因为是 三级联动,所以 是要先拿到小区id,再去执行 this.getAllbuilding() 获取该小区底下的所有楼栋, 后面获取 房间号 也一样。

 

下面实现的 就是 改变value值,实现 联动, 给下拉框绑定change事件,

这里已经实现了, 切换下拉框,data会发生变化,但是实际情况中, 页面的展示没有更新, 也就是 切换了小区或者楼栋, 后面联动的下拉框的数据没有实实的更新,所以使用watch 深度监听那三个 数组

 

Logo

前往低代码交流专区

更多推荐