elementUI中textarea组件无法autoSize问题记录

问题:使用饿了么框架中的文本域组件,配置autoSize,使其自适应高度。在输入的过程中,可以正常达到自适应的效果。但预览时,即value有默认值时,autoSize失效

配置:

<el-input type="textarea" :maxlength="250" autosize show-word-limit :value="value" />

效果:

value设置默认值,出现了滚动条且字数角标存在遮挡情况在这里插入图片描述

通过搜索,大多解决方案如下: 为 input type=textarea 增加ref。比如ref=‘inputTest’
在业务代码内,赋值时执行 this.$nextTick(function () { this.$refs.inputTest.resizeTextarea(); })

但是无论我在该组件里面如何添加resizeTextarea(created,mounted,watchvalue的变化中)都没有生效。且测试过程中,发现在输入框还没有展示出来的时候,变量已经被赋值,即变量被提前处理了。那么在ref方式没有生效的情况下,我在想是不是隐藏的元素 elementUI 就不 autosize 了,换一种控制显示隐藏的方法v-if试了一下,果然成功了。
在这里插入图片描述

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值