直奔主题,今天收到了一个需求,城市树,之前想说后端把数据直接返回一个树结构的数组返回给我,在前端做处理,一听说数据库条数有好几个达不溜,人都麻了;后面综合考虑了一下用直接使用联级选择器的懒加载去做。

直接上代码【这里有个polNodeClick事件我们后面介绍一下他的作用】在这里插入图片描述
这里强调一下【页面里面不需要在加载的时候调用第一级的树,只需要用这个就行了,options绑定的数组默认是 [ ] 就行了】
在这里插入图片描述

附加:这里强调一下编辑页面用这个组件要如何处理, 首先要让v-model 绑定的值是一个数组,举个栗子你选择到了
第二级 那内容就是 [‘42’,''10004‘’],组件自己回根据你的v-model去查询出来他对应的数组进行push到组件里面的,也就是会掉两边接口然后把他对应数据通过lazyLoad添加进去;

后端接口调用和返回的数据格式
在这里插入图片描述

在这里插入图片描述


做到这里我们的基本功能就已经可以结束了,下面就是点击文字选中节点了

网上找的文章我大概得都看了一遍,然后有个付费的,我属实不得劲,俗称白嫖怪的我,不为他的代码折腰。

注:这个区域的是实例代码,大家就不用抄了----------------------------------------------
在这里插入图片描述

注:只是给大家看看你们找的文章案例是不是这种的


下面看看我的处理办法【我直接反手一个利用组件的v-model,对他的值进行操作,直接解决问题,咱们用的vue我们应该用魔法打败魔法
在这里插入图片描述

在这里插入图片描述

好了,话题结束了,希望这篇文章能帮助想要白嫖的你,反手给我个双击就行了,
写这篇文章刚好是 疯狂星期四,v me 50
看看实力

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐