关于vue单选和多选切换过程中的坑

关于vue单选和多选切换过程中的坑
问题:vue单选多选切换时,会报错,<transition-group> children must be keyed: <ElTag>原因是切换过程中错误栈都在Vue内部

解决办法:select标签加v-if判断,multiple属性加条件multiple,watch监控multiple的变化,先关闭select再重新加载。

<el-select    v-if="update"   >
	<option :multiple="multiple"></option>
</el-select>
<script>
{  
data(){  
  return {      
  update: true,
  updates:[] ,
   updateIndex:null,
   multiples:[],
   multiple:true,
     } 
 }, 
methods:{
a(){
this.multiple = true
}
},
 watch:{  
  'multiple'(){ //单个监控
     this.update = false  
    setTimeout(()=>{   
     this.update = true 
     },300)  
  } ,
     'multiples'(val) {//监控数组时
      this.$set(this.updates, this.updateIndex, false)
      setTimeout(() => {
        this.$set(this.updates, this.updateIndex, true)
      }, 300)
    },
 }}</script>

不足之处:切换过程中有短暂的可见的框变动。功能满足,但实现效果不很理想。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值