textarea自动定高问题研究

1、问题背景

   景泰生产管理两票版本的表单要求内容全部展开显示，所以输入类型的表单都用了textarea控件。具体要求如图：

2、问题表现

  Element-ui textarea组件有autosize属性，这个属性就是用于自适应文本高度的，但是表单在动态渲染时，经常出现高度不对的情况，如图两种情况

3、解决方案

  经过再网上苦苦的寻找，终于找到个可行方案：

1. 为 input type=textarea 增加ref。比如ref='userInfo'
2. 在input值发生变化时，调用this.$refs.userInfo.resizeTextarea()，调用方法如下:

this.$nextTick(()=> {
this.$refs.userInfo.resizeTextarea();
});

4、引发原因

  经查资料，textarea是在组件mounted钩子中自动计算高度的，但是在mounted时，表单可能还没拿到值，所以自适应高度失效。还有一种情况是有的表单用了v-show,隐藏元素是不会自适应高度的，在显示后，高度不会重新计算，所以显示有问题。