vue+element下拉框实现 三级联动
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
要求实现三个带搜索的 下拉框 的三级联动, element 里的下拉框带搜索,可以实现,就是三级联动需要自己实现
给到 三个接口,1,获取小区list
2, 获取该小区楼栋号
3,获取楼栋下的房间号
实现如下:
因为涉及到回填,所以 页面一加载就要获取 url 的小区id,
mounted 发起请求, 请求所有小区, 所有小区赋值给 this.villagList ,
(!!! 在请求的里获取url里的小区编号,不然会出现 小区的下拉框只会出现value,不会更新为该value所指向的label !!!)
因为是 三级联动,所以 是要先拿到小区id,再去执行 this.getAllbuilding() 获取该小区底下的所有楼栋, 后面获取 房间号 也一样。
下面实现的 就是 改变value值,实现 联动, 给下拉框绑定change事件,
这里已经实现了, 切换下拉框,data会发生变化,但是实际情况中, 页面的展示没有更新, 也就是 切换了小区或者楼栋, 后面联动的下拉框的数据没有实实的更新,所以使用watch 深度监听那三个 数组
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)