关于萌新初识VUE的那些事 (定制自己的级联选择器)

偷懒,一次书写,多次应用,这是推动人类进步的基本根源。我们写代码也是一直如此,当你写出一个一写百用的代码时,我觉得应该已经不是垃圾代码了,起码拥有了复用的属性!

进入正题

在进行页面展示时,我们经常会用到这个东西,图截自Element-ui

去看官方教程的时候,都是一些写死的数据,如果我们想要定制自己级联选择器,就要对数据进行一系列的处理,接下来我会分享一下我的小心得,希望可以帮助到有需要的同学。

首先在:options中绑定你的数据数组,这里就需要我们根据格式来定制自己的数据了。官方要求的数据格式是这样子的

一般情况下后台的伙伴会给你传递一系列的对象过来作为你的基本数据,就像这样的,然而根本不能直接使用

所以我们去要对数据进行处理,选择自己有用的数据并赋予其格式

在这里面我们就构建了一个符合官方格式的自己的数据。它会根据后台传来的数据自动判断你到底级联了几级,而不用自己去动手一个一个进行判断是否有下一级,写出十分冗余的代码了。

原理就是当你发现这个级别下面还有子级别的时候就调用一下findsome这个方法,如果没有下一级则跳出。是一个原理很简单但是需要动一下脑子的东西,希望可以帮助到需要的人,或者帮助需要的人灵光一现啦!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值