zoukankan      html  css  js  c++  java
  • 将textarea实现自适应高度及IE下滚动条不出现的bug

    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(/ /g)
    return arr ? arr.length + 2 : 2
    },
    将calcRows绑定在rows上,即可实现文本域高度自适应。
    
    
  • 相关阅读:
    关于c语言变量的内存分布测试程序
    常用ARM指令集及汇编_破解
    CPU读取内存0x30000000地址4个字节数据
    打印十六进制字符串查看内存地址
    JZ2440串口打印字符作为调试
    搭建Linux3.4.2内核编辑环境
    网卡驱动程序
    同步互斥阻塞
    poll机制分析[转]
    安装、配置、启动FTP、SSH或NFS服务
  • 原文地址:https://www.cnblogs.com/barry1102/p/8916829.html
Copyright © 2011-2022 走看看