element的el-input的textarea在el-table里面设置自动高度无效

在开发vue-admin 项目中，我们会用到el-table嵌套表单的形式其中就发现数据在回显的时候多行输入框自动增加了很多空白的部分。

<el-table-column prop="governorcomments" label="内容" >
  <template slot-scope="scope">
    <el-input
      type="textarea"
      autosize
      ref="enterInput"
      v-model="scope.row.governorcomments"
      :disabled='scope.row.disabled'
      :placeholder="请填写内容"
    />
  </template>
</el-table-column>

设置了autosize属性无效，他会自动增加很多空白的部分。

后面翻烂了全网的百度，很多人使用

this.$nextTick(function () {
    if (this.$refs.enterInput) {       
      this.$refs.enterInput.resizeTextarea();
    }
    }); 

在el-input 增加ref="enterInput"操作。 但是在el-table里面使用textarea无效。 最终经过几个小时不断尝试。我们使用初始化的时候先把他设置成单行输入框，等数据请求完在设置成多行文本。

<el-table-column prop="governorcomments" label="内容" >
 <template slot-scope="scope">
   <el-input
     :type="input_type"
     autosize
     ref="enterInput"
     v-model="scope.row.governorcomments"
     :disabled='scope.row.disabled'
     :placeholder="请填写内容"
   />
 </template>
</el-table-column>

 data() {
   return {
     input_type:'text',
   };
   methods: {
       list(){
          this.input_type = 'textarea'
           this.$nextTick(function () { 
               if (this.$refs.enterInput) {
               this.$refs.enterInput.resizeTextarea();
               } 
           });
    
       }