vue-resumer项⽬中element-ui遇到的textareaautosize问题
<el-input type="textarea" :autosize="{minRows:2}" v-model="amodel"></el-input>
如上边代码，element-ui 提供⾃动改变⼤⼩的 textarea 功能（这个功能）。
遇到问题表现
但是我的⼀个项⽬⾥，当 amodel 初始就有值的时候，他并不能调整⼤⼩，⽽是会出现滚动条，只有当修改内容的时候才会重新调整到合适⼤⼩。
解决过程
1. 我⾸先想到的是这是不是个坑，然后就直接搜索其他⼈有没有遇到过，但我把项⽬的 issue 都过了也没有到，看来并不是⼀个常
见的坑
2. 接下来我就想能不能⽤笨办法先把问题解决，项⽬继续往下进⾏，我⾸先想到的是既然改变内容能把问题解决，那把对应的元素触发
⼀遍 change 或者 input 事件之类的试⼀下，但是我并没有到 elementUI 是什么事件才会触发 autosize，⽽且项⽬中的数据项较多，这个办法甚⾄有点蠢了
3. 我继续思考，会不会是时机问题，因为我写的项⽬处的阶段是从 localstorage 拿数据，暂时还没写从服务端拿数据。我是在 created
阶段从 localstorage 读取的数据，⽽我查资料得到 elementUI 是在 mounted 阶段调整⼤⼩的，说明并不是这⼀问题。后来我才想到哪怕是先渲染然后再改变数据也应该是正常表现，这⼀思路完全不正确。
element表格横向滚动条4. 接下来我只能⽤更笨的办法逐步排查是什么问题
1. ⾸先我新建⼀个空项⽬，写好 elementUI 的 hello world
2. 然后写⼀个 autosize 的 textarea，分别测试了⼏个我认为引发问题的⼩因素，但都未重现
3. 接下来把我原项⽬中的的部分数据和 template 代码拷贝到新项⽬，发现也没问题
4. 然后我猜测是不是因为外层的循环导致或者是外边的容器导致的，所以我把更多的数据和 template 的结构拷贝的测试项⽬中，
发现均没问题，有点⽅了……
5. 我⼲了半个⼩时别的，回来继续想这个问题，我突然想到 4 中我复制代码的时候控制显⽰隐藏的数据没有拷贝过来（原项⽬中
是有 tab 的，测试项⽬中没有，就没办法切换显⽰隐藏，所以我就没拷贝），报了错，然后我直接写死了（写成 true）。隐藏⽤ v-show 控制的，实际上是 display:hidden，我就想到是不是隐藏的元素 elementUI 就不 autosize 了。然后我马上在原项⽬中测试，将其中⼀个出现问题的 tab 设置为默认的 tab，果然没问题的，问题的原因终于确定了。原项⽬中有好⼏个 tab 需要autosize，刚才设置默认 tab 这种⽅法肯定是不⾏的，那么换⼀种控制显⽰隐藏的⽅法就好了，因为我换了v-show，虽然 tab 这种需要频繁切换的⽤v-show更合适，但是为了解决这个问题也只能这么做了。
⼀般来说， v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件不太可能改变，则使⽤ v-if 较好。
ps：只是记录⾃⼰的思考过程，所以⾏⽂⽐较凌乱，语法也可能有问题，见谅。
PPS：在 GitHub 提了个 issue，得到的解决⽅案是：
1. 为 input type=textarea 增加ref。⽐如ref='userInfo'
2. 在v-show的值发⽣变化时，调⽤this.$sizeTextarea()，调⽤⽅法如下:
this.$nextTick(function () {
vmSelf.$sizeTextarea();
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。