标签：二级 true 前端 监听 子系统 联动 newValue 分行 代码

前端实现二级联动

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

需求：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。