一、概述

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

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

二、解决方法

主要有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="{minRows:2,maxRows:8}"></el-input> --><!-- <el-input type="textarea" v-model="createForm.desc" :rows="2"></el-input> --><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>

View Code

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

本文参考链接：

https://blog.csdn.net/yangwqi/article/details/104068693

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

html textarea文本域高度自适应
1.可直接在菜鸟教程网站测试页面中测试 <!DOCTYPE html> <html> <head><meta charset="utf-8&quo ...
html textarea a 整体,html textarea文本域高度自适应
1.可直接在菜鸟教程网站测试页面中测试菜鸟教程(runoob.com) id="symptomTxt" οninput="autoTextAreaHeight(thi ...
自适应textarea文本域高度原理
自适应文本域高度原理.什么是自适应文本域高度?可能名字叫的不是很容易理解,这里解释下,就是一个文本域输入框的高度会跟随内容高度变化而刚好就是文本高度.这就是自适应文本域高度文本域的标签通常就是 te ...
html文本域高度自适应,textarea高度自适应，textarea随着内容高度变化
有时候我们需要textarea的高度随着内容的多少去自适应的变化,今天我使用了JS原生和JQ写了一个textarea的高度随着他的内容高度变化的代码,希望能帮上忙. 废话不多说直接贴代码: texta ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
php设置文本框高度,怎样让textarea文本域宽度和高度width及height自动适应
这次给大家带来怎样让textarea文本域宽度和高度width及height自动适应,让textarea文本域宽度和高度width及height自动适应的注意事项有哪些,下面就是实战案例,一起来看一下 ...
textarea文本域宽度和高度（width、height）自动适应变化处理
textarea通过cols和rows设置宽度和高度:也可以用style来设置width和height,分别介绍: 1. 设置宽度100%,textarea宽度随父元素变化: 2. 设置rows,te ...
textarea如何实现高度自适应？
文章来源:http://blog.csdn.net/tianyitianyi1/article/details/49923069 转自:http://www.xuanfengge.com/textar ...
关于模拟文本域iview textarea文本域:autosize=quot;{minRows: 3,maxRows: 7}quot;这个属性的好处
具体写法:<Input v-model="value" type="textarea" :autosize="{minRows: 3,maxRo ...

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

一、概述

二、解决方法

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

最新文章

热门文章