Vue+element ui 表单中自适应文本高度的文本域及表格中列数据展示

1.通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

表单中设置如下：

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="说明" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入说明"
          :autosize="{ minRows: 1, maxRows: 50 }"
         />
    </el-form-item>
</el-form>  

表格中设置如下：

<el-table v-loading="loading" :data="tableList" border>
      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
      <!--header-align：设置表头是否居中；align：设置内容是否居中-->
      <el-table-column label="说明" align="left" header-align="center" prop="remark" min-width="400px">
        <template slot-scope="scope">
          <!--方式1：和表格中设置一样展示-->
          <!-- <el-input v-model="scope.row.remark" type="textarea" disabled :autosize="{ minRows: 1, maxRows: 50}"/> -->
          <!--方式2：截取换行字符串-->
          <div v-for="(item,index) in scope.row.remark.split('\n')" :key="index">{{item}}</div>
        </template>
      </el-table-column>
    </el-table>