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-inputv-elsetype="textarea"autosizeplaceholder="请输入备注"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;}
}

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

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

相关文章

在jupyter notebook中使用conda环境

在jupyter notebook中使用conda环境 1. 环境配置 conda activate my-conda-env # this is the environment for your project and code conda install ipykernel conda deactivateconda activate base # could be also some other environment conda install nb_cond…

在新能源充电桩、智能充电枪、储能等产品领域得到广泛应用的两款微功耗轨至轨运算放大器芯片——D8541和D8542

D8541和D8542是我们推荐的两款微功耗轨至轨运算放大器芯片&#xff0c;其中D8541为单运放&#xff0c; D8542为双运放&#xff0c;它特别适用于NTC温度采集电路、ADC基准电压电路、有源滤波器、电压跟随器、信号放大器等电路应用&#xff0c;在新能源充电桩、智能充电枪、…

网络编程--高并发服务器(二)

这里写目录标题 线程池高并发服务器UDP服务器TCP与UDP机制的对比TCP与UDP优缺点比较UDP的C/S模型实现思路模型分析实现思路&#xff08;对照TCP的C/S模型&#xff09; 二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二…

【跟着CHATGPT学习硬件外设 | 05】I2C

本文根据博主设计的Prompt由CHATGPT生成&#xff0c;形成极简外设概念。 &#x1f680; 1. 概念揭秘 I2C&#xff08;Inter-Integrated Circuit&#xff09;&#xff0c;也被称为IIC或双线接口&#xff0c;是一种用于微控制器&#xff08;Microcontrollers&#xff09;和外设…

用navicat进行mysql表结构同步

用navicat进行mysql表结构同步 前言新增一个列然后进行表结构同步删除一个列然后进行表结构同步把Int列转成TinyInt列&#xff0c;看数字溢出的情况下能不能表结构同步总结 前言 从同事那边了解到还能用navicat进行表结构同步&#xff0c;他会在发布更新的时候&#xff0c;直接…

Python基础之Class类的定义、继承、多态

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、class类1.类属性操作&#xff08;增删改&#xff09;2.类方法操作 二、类的继承1、语法2、方法重写 二、类的多态 一、class类 、三部分组成 1、类名&#xff…

MySQl on和where条件的区别?

MySQ L on和where条件的区别&#xff1f; on会生成临时表&#xff0c;不满足条件会置空 where 过滤数据&#xff0c;不满足的数据不会显示

木地板 VS 瓷砖,不同风格应该怎么选?福州中宅装饰,福州装修

不同装修风格应该怎么选择地板铺贴材质&#xff1f;是选择木地板还是瓷砖&#xff1f;以下分点阐述&#xff1a; ①现代简约风格 推荐使用瓷砖。因为瓷砖的表面光滑&#xff0c;能反射出灯光的倒影&#xff0c;营造出简洁明亮的视觉效果。同时&#xff0c;瓷砖耐磨、易清洁&am…

算法——动态规划:01背包

原始01背包见下面这篇文章&#xff1a;http://t.csdnimg.cn/a1kCL 01背包的变种&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 简化一…

Mysql从0到1 —— CRUD/索引/事务

文章目录 1 预备知识1.1 安装1.2 登录 & 退出1.3 配置文件my.cnf 2 基础知识2.1 链接服务器2.2 什么是数据库2.3 基本使用2.3.1创建表2.3.2 插入数据 2.4 服务器、数据库、表的关系2.5 SQL分类2.6 存储引擎 3 Mysql数据库的操作3.1 创建和删除3.2 字符集和校验规则3.3 查看…

javaScript之递归

什么是递归&#xff1f; 递归函数是在一个函数内通过名字调用自身的情况下构成的。 递归的优点 递归可以用来处理循环解决起来比较麻烦的问题 方法&#xff1a; 1&#xff0c;函数自己调用自己 2&#xff0c;找规律&#xff0c;找出这一次和上一次的关系 2&#xff0c;需…

这是斗魂大赛?不!是斗美大赛!

最近《绝世唐门》中斗魂大赛正如火如荼地展开&#xff0c;每场对战都十分精彩&#xff0c;令人心潮澎湃&#xff0c;忍不住大喊“过瘾”&#xff01; 除了扣人心弦的打斗场面&#xff0c;新登场的角色们更是颜值爆表&#xff0c;美得令人心动&#xff0c;帅得让人窒息。不得不赞…

机器学习模型及其使用方法——《机器学习图解》

本书教你两件事——机器学习模型及其使用方法 机器学习模型有不同的类型&#xff0c;有些返回确定性的答案&#xff0c;例如是或否&#xff0c;而另一些返回概率性的答案。有些以问题的形式呈现&#xff1b;其他则使用假设性表达。这些类型的一个共同点是它们都返回一个答案或…

配置中心apollo==springboot使用apollo

多环境的APOLLO之前已经搭建好了。 新建一个SPRINGBOOT项目 <dependency> <groupId>com.ctrip.framework.apollo</groupId> <artifactId>apollo-client</artifactId> <version>2.2.0</version> </dependency> <?x…

L2-4 部落

在一个社区里&#xff0c;每个人都有自己的小圈子&#xff0c;还可能同时属于很多不同的朋友圈。我们认为朋友的朋友都算在一个部落里&#xff0c;于是要请你统计一下&#xff0c;在一个给定社区中&#xff0c;到底有多少个互不相交的部落&#xff1f;并且检查任意两个人是否属…

实现定时任务

定时任务的实现方式有很多&#xff0c;比如XXL-Job等。但是其实核心功能和概念都是类似的&#xff0c;很多情况下只是调用的API不同而已。 这里就先用SpringBoot为我们提供的定时任务的API来实现一个简单的定时任务&#xff0c;让大家先对定时任务里面的一些核心概念有个大致的…

网络编程(1)写一个简单的UDP网络通信程序【回显服务器】,并且实现一个简单的翻译功能

使用 JAVA 自带的api 目录 一、回显服务器 UdpEchoServer 服务器代码 客户端代码 二、翻译功能 UdpDictServer 在UdpDictServer里重写process方法 一、回显服务器 UdpEchoServer /*** 回显服务器* 写一个简单的UDP的客户端/服务器 通信的程序* 这个程序没有啥业务逻辑&am…

TSINGSEE青犀智慧工厂视频汇聚与安全风险智能识别和预警方案

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…

PaddleGAN快速让你的照片动起来

一个不知名大学生&#xff0c;江湖人称菜狗 original author: Jacky Li Email : 3435673055qq.com Time of completion&#xff1a;2024.03.30 Last edited: 2024.03.30 目录 PaddleGAN快速让你的照片动起来 两个方案让照片动起来 方案一&#xff1a;FirstOrder 下载Paddle…

CAPL实现关闭TCP连接的几种方式以及它们的区别

在讲正文前,我们有必要复习下关闭TCP连接的过程:四次挥手。 假设A和B建立TCP连接并进行数据传输,当A的数据发送完后,需要主动发起断开连接的请求: A发送FIN报文,发起断开连接的请求B收到FIN报文后,首先回复ACK确认报文B把自己的数据发送完,发送FIN报文,发起断开连接的…