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

news2024/11/17 13:29:42

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

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

参考文献

参考文献(问题更全)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

外卖小程序源码vs定制开发:何时选择哪种方式?

在数字餐饮行业的蓬勃发展中&#xff0c;外卖应用程序已经成为餐厅和创业者的必备工具。然而&#xff0c;当涉及到开发外卖应用程序时&#xff0c;您会面临一个重要的决策&#xff1a;是使用外卖小程序源码还是进行定制开发&#xff1f;这两种方法各有优势和劣势&#xff0c;取…

这款可视化拖拽式低代码平台,真香!

目录 一、产品介绍 二、设计原理 三、界面展示 1、代码生成器 2、工作流程 3、门户设计 4、大屏设计 5、报表设计 6、第三方登录 7、多租户实现 8、分布式调度 9、消息中心 四、功能框架 我们在低代码领域探索了很多年&#xff0c;从2014 开始研发低代码前端渲染&#xff0c;从…

DRM全解析 —— CRTC详解(1)

本文参考以下博文&#xff1a; Linux内核4.14版本——drm框架分析(4)——crtc分析 特此致谢&#xff01; 1. 简介 CRTC实际上可以拆分为CRTC。CRT的中文意思是阴极摄像管&#xff0c;就是当初老电视上普遍使用的显像管&#xff08;老电视之所以都很厚&#xff0c;就是因为它…

初学者如何选择:前端开发还是后端开发?

#开发做前端好还是后端好【话题征文】# 作为一名有多年开发经验的过来人&#xff0c;我认为前端开发和后端开发都有其独特的魅力和挑战。下面我将就我的个人经历和观点来分享一些关于前端开发和后端开发的看法。 首先&#xff0c;让我们将编程世界的大城市比作前端开发和后端开…

微信小程序获取用户头像调整

微信小程序获取用户头像&#xff0c;由于用户隐私策略调整&#xff0c;腾讯对获取用户信息也进行了调整。 记录内容如下&#xff1a; 1 新方式 新的方式&#xff1a;当触发获取用户头像时&#xff0c;由用户选择头像图片&#xff0c;输入昵称。 具体代码如下&#xff0c;即&…

Mybatis-plus 使用

1. 注解使用 mybatis-plus提供了 TableName, TableId, TableField, TableLogic 四种注解&#xff0c;其含义分别为&#xff1a; TableName TableName("SPF_Require_Vehicle") 用于声明当前class所对应数据库中的表&#xff0c;如果class的名字和表的名字完全相同&…

基于SSM的宿舍管理系统(有报告)。Javaee项目。

演示视频&#xff1a; 基于SSM的宿舍管理系统&#xff08;有报告&#xff09;。Javaee项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMvc My…

面试高频手撕算法 - 背包问题2

目录 1. 完全背包 1.1 【模板】完全背包 1.2 零钱兑换 1.3 零钱兑换 II 1.4 完全平方数 2. 二维费用的背包问题 2.1 一和零 2.2 盈利计划 --- 如果背包问题原先没有基础的&#xff0c;建议先看上一篇博客 --- 面试高频手撕算法 - 01背包系列 1. 完全背包 1.1 【模板】…

天眼销|企业数据查询必备

首先&#xff0c;得介绍一下天眼销是一个什么样的平台&#xff0c;请往下看&#xff1a; 可能会有一些还是觉得懒得看&#xff0c;简单理解&#xff0c;它与我们熟知的某查查&#xff0c;天眼某相类似&#xff0c;有很多共同之处。比如&#xff1a;某查查的服务模式&#xff08…

数据结构与算法(七)--使用链表实现栈

一、前言 之前我们已经学习了链表的所有操作及其时间复杂度分析&#xff0c;我们可以了解到对于链表头的相关操作基本都是O(1)的&#xff0c;例如链表头增加、删除元素&#xff0c;查询元素等等。那我们其实有一个数据结构其实可以完美利用到这些操作的特点&#xff0c;都是在…

Idea升级版本后踩坑关于Local History

版本升级&#xff1a;IntelliJ IDEA 2022.1.2 (Ultimate Edition) Local History本地历史修改记录在idea升级后默认只保留 5天 以内的修改记录&#xff0c;导致时间过长的一些内容就自动被清除掉了。可通过File->Setting-Advanced Setting 进行修改。

数据结构——常见的十种排序算法

一、常见的十种排序算法&#xff1a; 冒泡排序、选择排序、插入排序、归并排序、快速排序、希尔排序、堆排序、计数排序、桶排序、基数排序 1.【知识框架】 补充&#xff1a; 内部排序&#xff1a;整个排序过程完全在内存中进行。 外部排序&#xff1a;由于待排序记录数据量太…

python进行接口自动化测试

一、接口自动化测试的流程 1、需求分析 1、1请求&#xff08;url,方法、数据&#xff09; 2、挑选需要做自动化测试的接口 3、设计自动化测试用例 4、搭建自动化测试环境 5、设计自动化执行框架&#xff08;报告、参数化、 用例执行框架&#xff09; 6、编写代码 7、执…

工程派工单,建筑工程派工单

工程派工单是指建设项目管理人员或工程维修人员发出的文件&#xff0c;用于标明工人或维修人员在建设项目或设备中处理或维修问题的任务。派工单包括建设项目的实际维护任务、所需材料、工具等信息&#xff0c;以及具体的执行人员和完成时间。工程派工单是保证建设项目顺利开展…

用《斗破苍穹》的视角打开C#3 标签与反射(人物创建与斗技使用)

随着剧情的发展&#xff0c;主线人物登场得越来越多&#xff0c;时不时跳出一个大佬&#xff0c;对我张牙舞爪地攻击。眼花缭乱的斗技让我不厌其烦&#xff0c;一个不小心&#xff0c;我就记不清楚在哪里遇上过什么人&#xff0c;他会什么斗技了。这时候&#xff0c;我就特别希…

Centos中清除因程序异常终止,导致的残留的Cache/buff_drop_caches命令---linux工作笔记063

我这里因为nifi程序背压设置的不合理,导致,内存和CPU消耗过高,系统崩溃,但是重启NIFI以后,发现 对应的执行top命令,看到,系统的buff/cache 依然没有减少,说明内存被浪费了,残留在这里没有被回收. 用这个办法执行这个命令; linux会自动触发清理,但是只有在内存不够用的时候才会…

计算机竞赛 题目:基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

文章目录 1 简介2 传统机器视觉的手势检测2.1 轮廓检测法2.2 算法结果2.3 整体代码实现2.3.1 算法流程 3 深度学习方法做手势识别3.1 经典的卷积神经网络3.2 YOLO系列3.3 SSD3.4 实现步骤3.4.1 数据集3.4.2 图像预处理3.4.3 构建卷积神经网络结构3.4.4 实验训练过程及结果 3.5 …

沈阳陪诊系统|沈阳陪诊系统开发|沈阳陪诊系统功能和优势

在现代医疗服务中&#xff0c;陪诊系统服务正变得越来越重要。这项创新的服务提供了一种全新的方式&#xff0c;帮助患者在医院就诊时获得更好的照顾和支持。无论是面对复杂的医学流程还是需要心理支持&#xff0c;陪诊系统服务都能够为患者提供方便、专业的帮助。陪诊系统服务…

自学SLAM(3)---保姆教程教你如何使用摄像头运行ORB-SLAM2

前言 上一篇文章我讲述了如何使用自己的视频运行ORB-SLAM2 链接如下&#xff1a; 链接: 上一篇&#xff0c;环境搭建及使用自己的视频运行ORB-SLAM2 没有搭建环境的朋友看上面我的链接哦&#xff0c;里面有超详细的环境搭建&#xff0c;一步一步来保姆级别的哦 那么本篇&#…

【mysql 大表清理】磁盘占用太多,清理无效大表

在使用MySQL数据库时&#xff0c;有时候由于数据量增加或者磁盘空间限制&#xff0c;会导致数据库磁盘空间不足的问题。这会影响到数据库的正常运行&#xff0c;需要及时清理磁盘空间来解决问题。本文将介绍如何清理MySQL数据库的磁盘空间&#xff0c;并给出示例以帮助读者更好…