<el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题

需求:首先是给定高度,输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。

<el-row class="textarea-row"><el-col :span="3" class="first-row-title">天气</el-col><el-col :span="21" class="multi-rmk-col "><el-form-item prop="weather"><el-inputtype="textarea"v-model="form.weather"style="height: 100%"></el-input></el-form-item></el-col></el-row>
.multi-rmk-col >>> .el-form-item__content,
.multi-rmk-col >>> .el-textarea__inner{height: 100% !important;
}
::-webkit-scrollbar {width: 6px; /*滚动条宽度*/height: 6px; /*滚动条高度*/
}
.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar-thumb {background-color: rgba(168, 168, 168,.4);/*滚动条默认显示的颜色*/
}.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar {   width: 8px;   height: 8px;background-color: #4a4a4a;/*滚动条背景色显示的颜色*/}

参考文章

问题二:

加入这个,@input=“change($event)”

          <el-form-item prop="weather"><el-inputtype="textarea"v-model="form.weather"style="height: 100%"resize="none"@input="change($event)"></el-input></el-form-item>
methods: {change(){this.$forceUpdate();},

参考文献

参考文献(问题更全)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/127355.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能化物流管理:全国快递物流查询API的角色与优势

前言 当今社会&#xff0c;物流行业已经成为了国民经济的重要组成部分&#xff0c;而快递物流则是物流行业中的一个重要分支。随着信息技术的不断发展&#xff0c;智能化物流管理正逐渐成为快递物流领域的趋势&#xff0c;而全国快递物流查询API作为其中的一部分&#xff0c;在…

虚拟机Ubuntu18.04安装对应ROS版本详细教程!(含错误提示解决)

参考链接&#xff1a; Ubuntu18.04安装Ros(最新最详细亲测)_向日葵骑士Faraday的博客-CSDN博客 1.4 ROS的安装与配置_哔哩哔哩_bilibili ROS官网&#xff1a;http://wiki.ros.org/melodic/Installation/Ubuntu 一、检查cmake 安装ROS时会自动安装旧版的Cmake3.10.2。所以在…

mysql MVCC(多版本并发控制)理解

最近看MVCC相关资料&#xff0c;这边做一个记录总结&#xff0c;方便后续理解。 目录 一、MVCC相关概念 二、MVCC实现原理 1.隐藏字段 2.undo log 3.Read View 4.MVCC的整体处理流程 5. RC&#xff0c;RR级级别下的innoDB快照读有什么不同 6.总结 一、MVCC相关概念 1…

什么是业务流程图(TFD),数据字典(DD),数据流程图(DFD)

什么是业务流程图&#xff08;TFD&#xff09;&#xff0c;数据字典&#xff08;DD&#xff09;&#xff0c;数据流程图&#xff08;DFD&#xff09;&#xff1f; 答: TFD是一种描述系统内各单位、人员之间的业务关系、作业顺序和管理流向的图表&#xff0c;利用它可以帮助分析…

震撼消息!OpenAI考虑加入AI芯片制造联盟

原创 | 文 BFT机器人 OpenAI是著名的ChatGPT背后的强大力量&#xff0c;可能很快就会深入研究人工智能芯片制造的动态世界。据路透社最新报道&#xff0c;该公司正在积极考虑创建其独特的人工智能芯片&#xff0c;甚至正在考虑收购该领域的潜在目标。 全球对人工智能芯片的需求…

一些流程图(自用)

前端一次访问后端程序的请求流程 web程序运行流程

竹云筑基,量子加密| 竹云携手国盾量子构建量子身份安全防护体系

9月23日-24日&#xff0c;2023量子产业大会在安徽合肥举行。作为量子科技领域行业盛会&#xff0c;2023年量子产业大会以“协同创新 量点未来”为主题&#xff0c;展示了前沿的量子信息技术、产业创新成果&#xff0c;并举办主旨论坛、量子科普讲座等系列专项活动。量子信息作为…

Windows技巧

Windows应用 无限延长Windows10 自动更新时间 管理员身份打开cmd 输入以下代码 这里设置的是3000天&#xff0c;需要恢复更新可以将其设置为1天 reg add “HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings” /v FlightSettingsMaxPauseDays /t reg_dword…

prometheus使用数据源的timestamp而非server的timestamp

关于timestamp指标的解释 prometheus中的指标timestamp有两个&#xff1a; prometheus拉取时刻的timestamp&#xff0c;即服务端的timestamp&#xff1a;time.Now()&#xff1b;exporter的/metrics接口&#xff0c;除了返回metric&#xff0c;value&#xff0c;还返回timesta…

Web:前端常用的几种Http请求GET和POST样例

1、简述 在Web开发过程中&#xff0c;少不了发起Http请求服务端的接口数据&#xff0c;在不同的框架中使用了不同的Http请求方式&#xff0c;常用的请求有fetch、 ajax、 axios、XMLHttpRequest、request&#xff0c;以下样例仅供参考。 2、Fetch Fetch API 是一种 JavaScr…

Elasticsearch:什么时候应该考虑在 Elasticsearch 中添加协调节点?

仅协调节点&#xff08;coordinating only nodes&#xff09;充当智能负载均衡器。 仅协调节点的这种特殊角色通过减轻数据和主节点的协调责任&#xff0c;为广泛的集群提供了优势。 加入集群后&#xff0c;这些节点与任何其他节点类似&#xff0c;都会获取完整的集群状态&…

投票礼物打赏流量主小程序开发

投票礼物打赏流量主小程序开发 投票功能&#xff1a;用户可以参与投票&#xff0c;选择自己支持的候选人或选项。礼物功能&#xff1a;用户可以给候选人或其他用户送礼物&#xff0c;以表示赞赏或支持。打赏功能&#xff1a;用户可以给候选人或其他用户打赏&#xff0c;以表示…