ElementUI-textarea文本域高度自适应设置的方法

àì夳堔傛蜴生んèń 2023-01-13 09:17 377阅读 0赞

# 一、概述 #

textarea默认情况下，当超出范围后，会在右边显示滑动条

![b0773135d85317606b5e96db93fd9ee1.png][]

体验不太好，不需要滑动条，根据内容，自动增加高度，并显示完整内容。

# 二、解决方法 #

主要有3种方式：

:rows="2" -->固定行数
    
    :autosize="{minRows:2,maxRows:8} -->高度范围
    
    autosize -->文本域高度自适应

这里采用第3中方式，增加autosize，

test.vue完整代码如下：

<template>
      <div>
        <el-form ref="createForm" :model="createForm" label-width="100px" label-position="left" size="mini">
          <el-form-item label="描述" prop="desc">
            
            
            <el-input type="textarea" v-model="createForm.desc" autosize></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
      export default {
        name: 'test',
        data() {
          return {
            createForm:{
              desc:""
            }
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

刷新页面，再次输入文字，效果如下：

![eb2897b3692290d87d09579620c63503.gif][]

本文参考链接：

[https://blog.csdn.net/yangwqi/article/details/104068693][https_blog.csdn.net_yangwqi_article_details_104068693]

[b0773135d85317606b5e96db93fd9ee1.png]: /images/20221022/a1fce9306ceb48b0b9482e8c0b37c4c4.png
[eb2897b3692290d87d09579620c63503.gif]: /images/20221022/803b1d97d01e414683b57910f5e1f927.png
[https_blog.csdn.net_yangwqi_article_details_104068693]: https://blog.csdn.net/yangwqi/article/details/104068693