SoFunction
Updated on 2025-04-06

Solve the problem of el-cascader loading page automatically expanding drop-down box in IE11 browser

Solve the problem of el-cascader loading page automatically expanding drop-down box in IE11 browser

Updated: June 30, 2023 09:11:38 Author: Skywang
This article mainly introduces the problem of el-cascader loading page automatically expanding the drop-down box in IE11 browser. Friends in need can refer to it for reference. I hope it can be helpful. I wish you more progress and get promoted as soon as possible to get a salary increase as soon as possible.

question

Recently, a friend asked a compatibility question, the el-cascader component of elementUI will automatically expand the drop-down box on IE after setting the filterable property. I found some methods online and felt that they were not effective, so I came up with a way to take advantage of them.

Solve the code

    <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: 'southeast',
          children: [{
            value: 2,
            label: 'Shanghai',
            children: [
              { value: 3, label: 'Putou' },
              { value: 4, label: 'Huangpu' },
              { value: 5, label: 'Xuhui' }
            ]
          }, {
            value: 7,
            label: 'Jiangsu',
            children: [
              { value: 8, label: 'Nanjing' },
              { value: 9, label: 'Suzhou' },
              { value: 10, label: 'Wuxi' }
            ]
          }, {
            value: 12,
            label: 'Zhejiang',
            children: [
              { value: 13, label: 'Hangzhou' },
              { value: 14, label: 'Ningbo' },
              { value: 15, label: 'Jiaxing' }
            ]
          }]
        }, {
          value: 17,
          label: 'northwest',
          children: [{
            value: 18,
            label: 'Shaanxi',
            children: [
              { value: 19, label: 'Xi'an' },
              { value: 20, label: 'Yan' }
            ]
          }, {
            value: 21,
            label: '* Uygur Autonomous Region',
            children: [
              { value: 22, label: 'Urumqi' },
              { value: 23, label: 'Karamay' }
            ]
          }]
        }],
        numfirst: 0
      }
    },
     methods: {
       isIE() { //ie?
         if (!! || "ActiveXObject" in window){
            return true;
         }else{
           return false;
         }
      },
      visibleChange(flag){ // How to trigger when the shadow hiding changes are displayed on the online frame        let isIE = () 
        if (flag &&  ===0 && isIE ) { // Retract the drop-down box when judging the first time and is IE browser          this.$ = false
           = 1
        } 
      },
    }
}

The above is the detailed content to solve the problem of automatically expanding the drop-down box for el-cascader in IE11 browser. For more information about el-cascader IE11 loading drop-down box, please pay attention to my other related articles!

  • el-cascader
  • IE11
  • Pull down box
  • Page loading

Related Articles

  • Detailed explanation of the download and configuration steps of VUE scaffolding

    This article mainly introduces the download and configuration of VUE scaffolding. The example code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2019-04-04

  • How to download local static resource static folders

    This article mainly introduces how Vue downloads the local static resource static folder, which has good reference value and hopes it will be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-09-09

  • How to use custom directives under setup in Vue

    This article mainly introduces how to use custom instructions under setup in Vue, which is of good reference value and hopes to be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-07-07

  • Detailed explanation of the mixin methods and custom instructions for component reusability

    This article mainly introduces the mixin method and custom instructions for detailed component reusability, which has certain reference value. If you are interested, you can learn about it.
    2017-09-09

  • A brief discussion on the issue of running the page after VUE project is packed

    This article mainly introduces the problem of running the page after VUE project is packed. The example code is introduced in this article in detail and has certain reference value. Interested friends can refer to it.
    2023-01-01

  • Nuxt3 nested route, error Failed to resolve component: NuxtChild's solution

    This article mainly introduces the solution of Nuxt3 nested routing and error Failed to resolve component: NuxtChild. It has good reference value and hopes it will be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2023-06-06

  • vue+px2rem implements the example code of adaptive adaptation of large-screen PC terminal (rem adaptation)

    Whether it is the adaptation of the mobile terminal or the large screen requirement, it is inseparable from the unit rem. Rem is the unit of the font size relative to the root element. The following article mainly introduces relevant information about the implementation of large-screen adaptation of the PC terminal with vue+px2rem. If you need it, please refer to it.
    2021-08-08

  • How to implement a Tetris using vue3

    I believe everyone has played the Tetris game. The following article mainly introduces relevant information on how to use vue3 to implement a Tetris. The article introduces the example code in detail. Friends who need it can refer to it.
    2022-01-01

  • Detailed explanation of vue search page development example code (popular searches, historical searches, Taobao interface demonstration)

    This article mainly introduces vue search page development examples (popular searches, historical searches, Taobao interface demonstrations). This article introduces you very detailed through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
    2020-04-04

  • Vue listening page refresh and close function

    When I was working on a project, I had a need to submit a change in the number of shopping cart items to the server when I left (jumped or closed) the shopping cart page or refreshed the shopping cart page. This article mainly introduces the refresh and closing functions of vue listening pages. Friends who need it can refer to it.
    2019-06-06

Latest Comments