前端实现二级联动

前端实现二级联动

今天遇到的需求是做一个下拉框的二级联动,但是不是通常的二级联动

需求

  1. 子系统和分行代码都是根绝后台接口获取的数据
  2. 根据子系统展示不同的分行代码
  3. 分行代码后端返回的是一坨数据,需要前端处理(但是有规律,还好)

预期结果:选择子系统之后,点击分行代码出现与之匹配的分行代码可供选择,子系统变了之后,分行代码为空需要重新选择。

简单粗暴的解决一下

  1. 页面加载时就把后台传过来的子系统和分行代码的数据拿过来 在mouted()中加载

  2. 然后保存在data中,按需取用

  3. 监听子系统数据的变化,根据他的变化筛选过滤需要的数据

    分行代码的前几个字母和子系统完全一样

   watch:{
       'addnfcDepends.syscode':{
           handler(newValue,oldValue){
               let length = newValue.length 
               //分行代码的前几个字母和子系统完全一样 采用过滤
               //erjiFunncode  是新添加在data中的数据用来放匹配到的分行代码    dataFunccode是后台返回的全部的分行代码
               this.erjiFunncode = this.dataFunccode.filter(item=>{
                   return item.funccode.slice(0,length) == newValue
               })
               //这个是子系统变了之后需要重新选择匹配新的分行代码
               this.addnfccode.funccode = ''
           }
       }
       deep:true,
      immediate:true
   }

做完了,和预期结果一样,但是其实还是有点小问题,因为我的编辑和添加用的是一个弹框,为了避免点击编辑时分行代码为空,就做了判断,如果是编辑弹框的话this.addnfccode.funccode = ''这行代码就不要了。。。

这个细节问题纠结还挺久的了,朋友给的建议是后台管理最好弹框单独做,但是我觉得那样代码不够简洁,可能是自我感动式的“高级代码”吧

知识点

  • 监听函数

    deep:true, immediate:true这两个根据情况可选

还有一个需要我自己注意的是,监听对象中的属性,可以直接写addnfcDepends.syscode,加个引号就行了,我刚开始写的是对象addnfcDepends,然后再在里面拿newValue.syscode来操作的,哈哈哈,其实我是忘记了怎么监听对象里面的属性了

上一篇:JS中对象的有关方法


下一篇:Java8 stream特性:Collectors.toMap