解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題

更新時間：2023年06月30日 09:11:38 作者：Skywang

這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

問題

最近一朋友問了個兼容性問題就是，elementUI的el-cascader組件，當設置filterable屬性后，在IE上會出現(xiàn)自動展開下拉框的問題。網(wǎng)上找了一些方法感覺沒什么效果，就想到一個取巧的方法。

解決代碼

    <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: '新疆維吾爾自治區(qū)',
            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){ // 聯(lián)機框展示影藏變化時觸發(fā)方法
        let isIE = this.isIE() 
        if (flag && this.numfirst ===0 && isIE ) { // 判斷第一次且是的IE瀏覽器的情況下收回下拉框
          this.$refs.selectLLLL.dropDownVisible = false
          this.numfirst = 1
        } 
      },
    }
}

以上就是解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題的詳細內(nèi)容，更多關(guān)于el-cascader IE11加載下拉框的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: