携程网站建设的意义,网站被收录又被取消了,wordpress自定义文章类型,做网络优化的公司排名文章目录 1.前言2. 碰到的问题3. 如何解决这两个问题 1.前言
最近项目上用到el-cascader这个组件,需要可以选第一级菜单#xff0c;也需要可以选第二级菜单#xff0c;点击完成之后需要关闭下拉框。其实功能比较简单#xff0c;找了很多资料#xff0c;没有找到合适的方案… 文章目录 1.前言2. 碰到的问题3. 如何解决这两个问题 1.前言
最近项目上用到el-cascader这个组件,需要可以选第一级菜单也需要可以选第二级菜单点击完成之后需要关闭下拉框。其实功能比较简单找了很多资料没有找到合适的方案下面还是自己想了个方案才解决问题
2. 碰到的问题
1.如何让下拉框消失 2.change方法只是值发生改变才会触发如果是同一个值就不会触发这个方法,我看有些人还去改源码?
3. 如何解决这两个问题
首先需要change方法 //关闭联级面板cascaderChange() {//监听值发生变化就关闭它this.$refs.cascaderLocation.dropDownVisible false;this.$refs.cascaderType.dropDownVisible false;},然后还需要visible-change这个方法当下拉框出现值为true下拉框消失值为false
//地点
el-cascaderv-modelformSearch.location:show-all-levelsfalse:optionslocations:props{ checkStrictly: true, expandTrigger: hover }refcascaderLocationchangecascaderChangeclearablestylewidth:210px;visible-changevalue cascaderVisibleChange(value, location)
/el-cascader//算法类型
el-cascaderv-modelformSearch.type:show-all-levelsfalse:optionsalgorithms:props{ checkStrictly: true, expandTrigger: hover }stylewidth:130px;refcascaderTypechangecascaderChangevisible-changevalue cascaderVisibleChange(value, type)
/el-cascader项目里面用了两种类型的,逻辑是当点开下拉框先把原始值保存起来再把值直接赋值为空保存起来的目的是防止用户没选直接关闭了下拉框这种情况就需要用到原来保存起来的值
cascaderVisibleChange(value, type) {if (value) {if (type location) {this.oldLocation this.formSearch.location;this.formSearch.location ;} else if (type type) {this.oldType this.formSearch.type;this.formSearch.type ;}} else {if (type location !this.formSearch.location) {this.formSearch.location this.oldLocation;} else if (type type !this.formSearch.type) {this.formSearch.type this.oldType;}}
}结果如下图
