解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题
更新时间:2023年06月30日 09:11:38 作者:Skywang
这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
问题
最近一朋友问了个兼容性问题就是,elementUI的el-cascader组件,当设置filterable属性后,在IE上会出现自动展开下拉框的问题。网上找了一些方法 感觉没什么效果,就想到一个取巧的方法。
解决代码
<el-cascader ref="cascader" :options="options" :props="props" filterable @visible-change="visibleChange" collapse-tags clearable> </el-cascader> export default { name: 'SdtDetail', components: { SdtFooter, PlusOrder, SdtReplace, inventedTable }, data () { return { props: { multiple: true }, options: [{ value: 1, label: '东南', children: [{ value: 2, label: '上海', children: [ { value: 3, label: '普陀' }, { value: 4, label: '黄埔' }, { value: 5, label: '徐汇' } ] }, { value: 7, label: '江苏', children: [ { value: 8, label: '南京' }, { value: 9, label: '苏州' }, { value: 10, label: '无锡' } ] }, { value: 12, label: '浙江', children: [ { value: 13, label: '杭州' }, { value: 14, label: '宁波' }, { value: 15, label: '嘉兴' } ] }] }, { value: 17, label: '西北', children: [{ value: 18, label: '陕西', children: [ { value: 19, label: '西安' }, { value: 20, label: '延安' } ] }, { value: 21, label: '新疆维吾尔自治区', children: [ { value: 22, label: '乌鲁木齐' }, { value: 23, label: '克拉玛依' } ] }] }], numfirst: 0 } }, methods: { isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{ return false; } }, visibleChange(flag){ // 联机框展示影藏变化时触发方法 let isIE = this.isIE() if (flag && this.numfirst ===0 && isIE ) { // 判断第一次且是的IE浏览器的情况下收回下拉框 this.$refs.selectLLLL.dropDownVisible = false this.numfirst = 1 } }, } }
以上就是解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题的详细内容,更多关于el-cascader IE11加载下拉框的资料请关注脚本之家其它相关文章!
相关文章
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
本篇文章主要介绍了详解Vue.js组件可复用性的混合(mixin)方式和自定义指令,具有一定的参考价值,有兴趣的可以了解一下2017-09-09Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决
这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下2021-08-08vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
这篇文章主要介绍了vue搜索页开发实例(热门搜索,历史搜索,淘宝接口演示),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
最新评论