element文本域 type=“textarea“ 如何实现高度自适应

 element默认的本文域设置最大高度之后超出显示滚动条，但是我们有一些情况下不需要显示滚动条，下面写一下vue2版本的解决办法，稍后出vue3（vue3下也可以使用vue2的写法）

首先安装jquery

npm install jquery --save 

 哪个页面引用的话（直接引用即可）

import $ from 'jquery'

<template>
  <el-input
    v-model="textarea"
    :rows="2"
    type="textarea"
    placeholder="Please input"
    v-on:input='input()'
  />
</template>

<script>
import $ from 'jquery'
export default {
  data(){
    return{
      textarea:""
    }
  },
  methods:{
    input(){
         $('textarea').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    }
   
  }
}
</script>

代码解析

 <el-input
    v-model="textarea"
    :rows="代表默认行高"    
    type="代表文本域类型"
    placeholder="默认提示信息"
    v-on:input='文本修改之后触发方法'
  />

 说到这里有人有疑问 为什么不使用 onchange来触发事件呢

        oninput：input每次内容发生改变时触发
        onchange: input失去焦点时触发

oninput在vue中的写法即   v-on:input

效果实现