解决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脚手架的下载和配置步骤详解

    VUE脚手架的下载和配置步骤详解

    这篇文章主要介绍了VUE脚手架下载和配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue如何下载本地静态资源static文件夹

    Vue如何下载本地静态资源static文件夹

    这篇文章主要介绍了Vue如何下载本地静态资源static文件夹,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中在setup下如何使用自定义指令

    Vue中在setup下如何使用自定义指令

    这篇文章主要介绍了Vue中在setup下如何使用自定义指令,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令

    详解Vue.js组件可复用性的混合(mixin)方式和自定义指令

    本篇文章主要介绍了详解Vue.js组件可复用性的混合(mixin)方式和自定义指令,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 浅谈VUE项目打包后运行页面一片白问题

    浅谈VUE项目打包后运行页面一片白问题

    本文主要介绍了浅谈VUE项目打包后运行页面一片白问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2023-01-01
  • Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决

    Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决

    这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下
    2021-08-08
  • 如何利用vue3实现一个俄罗斯方块

    如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)

    vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)

    这篇文章主要介绍了vue搜索页开发实例(热门搜索,历史搜索,淘宝接口演示),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue监听页面刷新和关闭功能

    Vue监听页面刷新和关闭功能

    我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。这篇文章主要介绍了vue监听页面刷新和关闭功能,需要的朋友可以参考下
    2019-06-06

最新评论