前端实现二级联动
今天遇到的需求是做一个下拉框的二级联动,但是不是通常的二级联动
需求:
- 子系统和分行代码都是根绝后台接口获取的数据
- 根据子系统展示不同的分行代码
- 分行代码后端返回的是一坨数据,需要前端处理(但是有规律,还好)
预期结果:选择子系统之后,点击分行代码出现与之匹配的分行代码可供选择,子系统变了之后,分行代码为空需要重新选择。
简单粗暴的解决一下,
-
页面加载时就把后台传过来的子系统和分行代码的数据拿过来 在mouted()中加载
-
然后保存在data中,按需取用
-
监听子系统数据的变化,根据他的变化筛选过滤需要的数据
分行代码的前几个字母和子系统完全一样
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来操作的,哈哈哈,其实我是忘记了怎么监听对象里面的属性了