1.<el-table-column label="备注" width="180">

  <template scope="scope">
<el-input
class="remark"
:readonly="Todisabled"
type="textarea"
:rows="calcRows(scope.row.remarks)"
v-model="scope.row.remarks"
placeholder="请输入内容">
</el-input>
</template>
</el-table-column>
2.element-ui的<el-textarea>文本框是不能自适应高度的,且如果将其设为只读disabled在IE9+下是不出现滚动条的,
这样会给使用人员造成误解,下面就如何将textarea设为自适应高度做以下解读:

3.解决IE9+下不出现滚动条的问题:

将disabled改为readonly,textarea的disabled在IE下是显示不出滚动条的,因此要想实现此功能,将disabled改为readonly,然后再去改变readonly下的样式;

textarea[readonly]{//所有disabled改为readonly
background-color: #eef1f6;
cursor: not-allowed;
}

4.解决高度不能自适应的问题:

如果不想定高,超出部分隐藏,而是要有多少内容显示多少,可以借助element-ui的<el-textarea>的rows属性,输入框行数,只对 type="textarea" 有效,为number,

这里想要实现自动变换高度,就应该将rows绑定为一个变量,这里:rows="calcRows(scope.row.remarks)",calcRows为vue,computed(){}里的一个计算属性,

calcRows(text) {
if (!text) return 2
const arr = text.match(/\n/g)
return arr ? arr.length + 2 : 2
},
将calcRows绑定在rows上,即可实现文本域高度自适应。
												

将textarea实现自适应高度及IE下滚动条不出现的bug的更多相关文章

  1. textarea框自适应高度

    export function autoTextarea(elem, extra, maxHeight){ /**textarea文本域随内容的多少而调整高度 */ extra = extra || ...

  2. textarea如何实现高度自适应?

    今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...

  3. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  4. textarea如何实现高度自适应(一)

    转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...

  5. 自适应高度输入框(contenteditable/textarea)

      一.用div模拟textarea div模拟输入域可以根据输入内容自动伸缩,而input和textarea输入内容较多时,高度固定,内容会显示不全. 1.坑1(IOS端无法输入) 在取消全局默认样 ...

  6. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  7. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

  8. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  9. Textarea高度随内容自适应地增长,无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. awk将某个字段按照分隔符分割之后统计次数

    cat label_movie2|grep BBD252CC0A4FE7D10C990261D5CEACB5|awk -F "," '{for(i=2;i<NF;i++) p ...

  2. Shell脚本 | 性能测试之启动时间

    安卓应用的性能测试,通常包括六个指标:启动时间.内存.CPU.耗电量.流量.流畅度. 除了耗电量,其他五个指标的数据在我们团队中已经可以通过运行脚本的方式获取到. 今天给大家分享下启动时间的脚本吧- ...

  3. springboot+zuul(一)------实现自定义过滤器、动态路由、动态负载。

    参考:https://blog.csdn.net/u014091123/article/details/75433656 https://blog.csdn.net/u013815546/articl ...

  4. linux文件命令汇总

    查看文件内容命令 cat 直接输出在命令行,适用于很少内容时候的输出, vim .vi  通过 编辑命令的只读模式进行文件内容的查看(翻页快捷键好像是 ctrl + F 下一页, ctrl + B 上 ...

  5. golang实现unicode码和中文之间的转换

    将中文转换为unicode码,使用golang中的strconv包中的QuoteToASCII直接进行转换,将unicode码转换为中文就比较麻烦一点,先对unicode编码按\u进行分割,然后使用s ...

  6. spring AOP 之三:使用@AspectJ定义切入点

    @AspectJ相关文章 <spring AOP 之二:@AspectJ注解的3种配置> <spring AOP 之三:使用@AspectJ定义切入点> <spring ...

  7. python的Web框架:Django路由系统以及模板导入

    Django的路由系统 当一个请求来到时 当一个请求来到时 1.首先到项目目录下的urls.py(根URLconf模块)中,查找路由规则: 2.根URELcof模块,里面定义了 urlpatterns ...

  8. Quart2D setNeedsDisplay

    #import "myview.h" @interface myview () @property(nonatomic,assign) float imageY; @end @im ...

  9. 对类型“DevExpress.Xpf.Grid.GridControl”的构造函数执行符合指定的绑定约束的调用时引发了异常。

    用VS2012 修改别人的WPF代码时碰到这个问题,百度下有人遇到相同问题,不过版本不同,先试下再说. 解决方法:安装Netframework4.5的补丁 地址:http://support.micr ...

  10. [转]本地 Windows 计算机密码登录 登录 腾讯云 Linux 实例

    本文转自:https://cloud.tencent.com/document/product/213/5436? 登录工具 使用 远程登录软件 ,采用密码登录 Linux 实例(本例中选择使用 Pu ...