前端实现二级联动

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

需求：

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来操作的，哈哈哈，其实我是忘记了怎么监听对象里面的属性了

标签：二级,true,前端,监听,子系统,联动,newValue,分行,代码
来源： https://www.cnblogs.com/wszzj/p/15224345.html