elementui el-input输入框类型为textarea时,将输入的数据保存换行和空格,并展示换行和空格

el-input输入框类型为textarea时,如果不做数据处理,是不会保存换行和空格的说输入了换行,但是保存数据后不会进行换行,需要保存输入的换行。

1、效果图

输入状态:在这里插入图片描述
显示时:在这里插入图片描述

2、实现代码

2.1、html部分:

<el-table-column align="center" label="备注" min-width="300">
  <template slot-scope="scope">
    <div v-if="!isEdit" v-html="remarkHTML(scope.row.remark)"></div>
    <el-input
      v-else
      type="textarea"
      autosize
      placeholder="请输入备注"
      v-model="scope.row.remark">
    </el-input>
  </template>
</el-table-column>

2.2、js部分:

传给后台保存的数据格式:

remark:“aaa0314\nb  b2   \nc cc\n  d"
remarkHTML(remark) {
  if (remark) {
  	// return remark.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
    return remark.replace(/\n|\r\n/g, '<br>').replace(/ /g, '  ')
  }
  return ''
},

2.3、css部分

::v-deep .el-textarea {
  margin: 10px 0;
  .el-textarea__inner {
    resize: none; // 去除右下角图标
    white-space: pre-wrap;
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

目标检测评价标准

主要借鉴&#xff1a;https://github.com/rafaelpadilla/Object-Detection-Metrics?tabreadme-ov-file 主要评价指标、术语&#xff1a; Intersection Over Union (IOU)&#xff1a;两个检测框交集面积与并集面积的比值 True Positive (TP)&#xff1a;IOU大于阈值的检测框…

SpringBoot 登录认证(二)

SpringBoot 登录认证&#xff08;一&#xff09;-CSDN博客 SpringBoot 登录认证&#xff08;二&#xff09;-CSDN博客 SpringBoot登录校验&#xff08;三&#xff09;-CSDN博客 HTTP是无状态协议 HTTP协议是无状态协议。什么又是无状态的协议&#xff1f; 所谓无状态&…

Spring Cloud GateWay——网关的基本使用

1. 为什么所有的请求先到网关呢&#xff1f; 有了网关就可以对请求进行路由&#xff0c;路由到具体的微服务&#xff0c;减少外界对接微服务的成本&#xff0c;比如&#xff1a;400电话&#xff0c;路由的试可以根据请求路径进行路由、根据host地址进行路由等&#xff0c; 当微…

Js逆向简单分析-某网站登录案例

文章目录 概要整体流程1.打开网站&#xff0c;输入数据进行登录2.对getlogin.php进行查看分析3.对于登录请求连接进行断点调试4.堆栈跟踪5.在网络上找在线md5加密 友情推荐 概要 某网站登录流量包逆向分析。 整体流程 1.打开网站&#xff0c;输入数据进行登录 用户名&#…

API接口自动化测试框架搭建之需求整理、详细设计和框架设计!

​ 简介&#xff1a; API接口自动化测试框架搭建之需求整理、详细设计和框架设计 1 需求整理 1.1 实现目的 API接口自动化测试&#xff0c;主要针对http接口协议&#xff1b;便于回归测试&#xff1b;线上或线下巡检测试&#xff0c;结合持续集成&#xff0c;及时发现运行环…

网络——套接字编程TCP

目录 服务端 创建套接字&#xff08;socket&#xff09; 服务端绑定&#xff08;bind&#xff09; 服务端监听&#xff08;listen&#xff09; 服务器接收&#xff08;accept&#xff09; 服务端处理&#xff08;read & write&#xff09; 客户端 创建套接字&#…

抖店不出单怎么办?关键在选品!想要选到”好品”就必须这样做!

哈喽~我是电商月月 做抖音小店在新手眼里&#xff0c;最难的是什么&#xff1f;有好多都说是&#xff0c;找达人 但其实不是&#xff0c;最难的就是找品&#xff0c;一个好的产品是自带流量的 我们可以这样理解&#xff1a;你见到的那些有能力的主播她是一个人做起来的吗&am…

GT收发器第四篇_QPLL和CPLL工作原理

文章目录 前言一、CPLL工作原理二、QPLL工作原理 前言 每个channel的时钟结构如图&#xff1a; Transceiver内部时钟来源可以是QPLL也可以是自己的CPLL。其内部TX 和 RX 时钟分频器可以单独从 QPLL 或 CPLL 中选择时钟&#xff0c;允许 TX和 RX 数据通道使用不同的参考时钟输入…

公司官网怎么才会被百度收录

在互联网时代&#xff0c;公司官网是企业展示自身形象、产品与服务的重要窗口。然而&#xff0c;即使拥有精美的官网&#xff0c;如果不被搜索引擎收录&#xff0c;就无法被用户发现。本文将介绍公司官网如何被百度收录的一些方法和步骤。 1. 创建和提交网站地图 创建网站地图…

用MATLAB编写一个简易的贪吃蛇游戏

编写一个贪吃蛇游戏的MATLAB代码需要涉及到游戏逻辑、图形用户界面(GUI)的创建、事件监听&#xff08;如键盘操作&#xff09;和游戏状态更新等。以下是一个简化的贪吃蛇游戏MATLAB代码示例&#xff0c;展示了基本的游戏框架和逻辑。 此代码创建了一个游戏窗口&#xf…

【Qt】常用控件(多元素控件)

目录 一、概述二、QListWidget三、QTableWidget四、QTreeWidget 一、概述 Qt中提供的多元素控件有&#xff1a; QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 的区别 以 QTableView 和 QTableView 为例 QTableView 是基于 MVC 设计的…

Type-C接口取电解决方案LDR6500

随着科技的不断进步&#xff0c;Type-C接口已经成为现代电子设备中不可或缺的一部分。作为一种全新的接口标准&#xff0c;Type-C以其独特的设计和强大的功能&#xff0c;在数据传输和电力传输领域展现出了巨大的潜力。特别是在取电应用方面&#xff0c;Type-C接口正逐渐改变着…

Linux重点思考(上)--权限/解压/定时任务/性能

Linux重点思考(上&#xff09;--权限/解压/定时任务 权限修改格式chmod使用 打包解压tar -zcvf ab.tar&#xff08;打包&#xff09;tar -xvf ab.tar -C/usr &#xff08;解压&#xff09; 系统防火墙service iptables statussystemctl status iptables区别 定时任务定时任务-c…

SpringBoot2.6.3 + knife4j-openapi3

1.引入项目依赖&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-spring-boot-starter</artifactId><version>4.5.0</version> </dependency> 2.新增配置文件 import io.swag…

第3集《唯识学概要》

诸位法师慈悲&#xff0c;陈会长慈悲&#xff0c;诸位菩萨&#xff0c;阿弥陀佛&#xff01; 请大家打开讲义第九面。 第九面&#xff0c;它谈到了我们众生的两种缘起。那么佛陀在大乘经典把我们生命的缘起分成两大块&#xff0c;一个是属于一种清净的缘起&#xff0c;一种是属…

【独立开发前线】Vol.26 【独立开发产品】吉光卡片-让你的文字变得酷炫起来

今天给大家分享一下 独立开发前线 社区成员张小吉 的作品 吉光卡片&#xff1b; 这是一款iOS的APP&#xff0c;下载&#xff1a;吉光卡片&#xff0c;主要功能是帮你制作酷炫的文字卡片&#xff0c;用精美的卡片让你的文字生动起来。 展示效果如下&#xff1a; 你可以用它制作…

vite+vue3使用模块化批量发布Mockjs接口

在Vue3项目中使用Mock.js可以模拟后端接口数据&#xff0c;方便前端开发和调试。下面是使用vitevue3使用模块化批量发布Mockjs接口的步骤&#xff1a; 1. 安装Mock.js 在Vue3项目的根目录下&#xff0c;使用以下命令安装Mock.js&#xff1a; npm install mockjs --save-dev …

vue3编写倒计时效果

说明&#xff1a;来自CSDN-问答板块&#xff0c;题主提问。 需求&#xff1a;如何通过表单控制倒计时开始时间&#xff0c;比如设定倒计时五分钟&#xff0c;循环几次&#xff0c;点击开始倒计时按钮&#xff0c;就让他从5分00秒&#xff0c;开始每秒减少&#xff0c;然后到0分…

001搭建前端环境—“01红C”的java项目【苍穹外卖】

整个项目是采用前后端分离的方式开发的 1. 前端工程基于nginx 2. 启动nginx&#xff0c;访问测试 双击 nginx.exe 即可启动 nginx 服务&#xff0c;访问端口号为 80 http://localhost:80

头歌 实验一 关系数据库标准语言SQL湖北汽车工业学院 )

头歌 实验一 关系数据库标准语言SQL 制作不易&#xff01;点个关注呗&#xff01;为大家创造更多的价值&#xff01; 目录 头歌 实验一 关系数据库标准语言SQL**制作不易&#xff01;点个关注呗&#xff01;为大家创造更多的价值&#xff01;** 第一关&#xff1a;创建数据库第…