關於el-select 單選與多選切換的時候報錯的解決辦法

本文轉載自查看原文 2019-10-23 16:22 829 vue

錯誤：

出錯原因：

估計是單選切換到多選的時候元素沒有刷新的原因，猜測

解決辦法：

1、在el-select上面加上一個條件判斷，條件判斷中綁定一個變量值例如 :multiple="isMultiple" v-if="update"

2、在vue中用watch監測isMultiple 如果isMultiple變化，settimeout中修改update

代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app"> 
  <el-select v-model="value" :multiple="isMultiple" v-if="update"  placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <input type="checkbox" v-model="isMultiple">
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
            return { 
                options: [
                    {
                      value: '選項1',
                      label: '黃金糕'
                    }, {
                      value: '選項2',
                      label: '雙皮奶'
                    }, {
                      value: '選項3',
                      label: '蚵仔煎'
                    }, {
                      value: '選項4',
                      label: '龍須面'
                    }, {
                      value: '選項5',
                      label: '北京烤鴨'
                    }
                ],
                value: '',
                isMultiple:false,
                update: true
            }
        },
        watch:{  
          'isMultiple'(){ //單個監控
                this.update = false  
                setTimeout(()=>{   
                    this.update = true 
                },50)
          }
        } 
    })
  </script>
</html>

效果

單選

多選：

不足：切換勾選的時候會出現閃爍

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 el-select下拉數據過多解決辦法 Element-UI中Select選擇器單選多選問題【Element-UI】解決select 切換單選/多選 multiple 狀態的問題 el-select多選時選項互斥 elementUI最新版的el-select使用filterable無效無法匹配正確搜索結果的Bug解決辦法 vue el-select 設置默認值后選項無法切換 el-select多選框值顯示不完整 element el-radio單選切換 el-select 封裝 element的el-tabs控制,以及el-select 多選默認值