zoukankan      html  css  js  c++  java
  • 关于el-select 单选与多选切换的时候报错的解决办法

    错误:

    出错原因:

    估计是单选切换到多选的时候元素没有刷新的原因,猜测

    解决办法:

    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>

    效果

    单选

    多选:

    不足:切换勾选的时候会出现闪烁

  • 相关阅读:
    SpringAOP--动态数据源
    SpringAOP--代理
    SpringAOP--aop使用
    Kafka03--Kafka消费者使用方式
    Kafka02--Kafka生产者简要原理
    Kafka01--Kafka生产者使用方式
    SpringBoot中的日志使用:
    LCS&&LRC&&LIS问题
    解决Idea.exe无法启动问题(idea2017.3版本)
    七牛云简单实用-uploadManager.put(..)抛出异常
  • 原文地址:https://www.cnblogs.com/pengfei25/p/11726992.html
Copyright © 2011-2022 走看看