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

news2024/11/29 16:31:07

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;
  }
}

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

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

相关文章

【CKA模拟题】综合案例演示如何创建pv和pvc

Useful Resources: Persistent Volumes & Claim 题干 For this question, please set this context (In exam, diff cluster name) kubectl config use-context kubernetes-adminkubernetesCreate a PersistentVolume (PV) and a PersistentVolumeClaim (PVC) using an e…

排序---数组和集合

1、数组排序 Arrays.sort(int[] a)这种形式是对一个数组的所有元素进行排序&#xff0c;并且是按照从小到大的排序。 public static void main(String[] args) {Integer []arr {1,2,3,4,5,6};//升序Arrays.sort(arr);for (int x:arr){System.out.print(x " ");}Sys…

【Web APIs】正则表达式

目录 1.正则表达式 2.正则表达式语法 3.元字符 3.1边界符 3.2量词 3.3字符类 4.修饰符 1.正则表达式 正则表达式&#xff08;Regular Expression&#xff09;是用于匹配字符串中字符组合的模式&#xff0c;在 JavaScript中&#xff0c;正则表达式也是对象。通常用来查…

数据分析之POWER Piovt的KPI设置

内容总结&#xff1a; 1.两个表格关联不上&#xff1a;需要添加辅助列&#xff0c;建立关联 2.添加辅助列后还关联不上&#xff1a;将虚线变为实线 3.根据需求要增加一些度量值 4.设置KPI后&#xff0c;绝对值选1后设定百分比 5.在透视表里面加入KPI状态 导入所关联的数据后建立…

取证之内存取证工具Volatility学习

一、简介 Volatility是一款开源的内存取证分析工具&#xff0c;支持Windows&#xff0c;Linux&#xff0c;MaC&#xff0c;Android等多类型操作系统系统的内存取证方式。该工具是由python开发的&#xff0c;目前支持python2、python3环境。 二、安装 1、下载地址 GitHub - …

Matlab之求直角坐标系下两直线的交点坐标

目的&#xff1a;在直角坐标系下&#xff0c;求两个直线的交点坐标 一、函数的参数说明 输入参数&#xff1a; PointA&#xff1a;直线A上的点坐标&#xff1b; AngleA&#xff1a;直线A的倾斜角&#xff0c;单位度&#xff1b; PointB&#xff1a;直线B上的点坐标&#xf…

【日常记录】【JS】@babel/core @babel/polyfill @babel/preset-env core-js 介绍

文章目录 1、介绍1.1 babel/core1.2 babel/polyfill1.3 babel/preset-env 2、基本使用3、参考链接 1、介绍 1.1 babel/core babel/core 是 Babel 编译器的核心模块&#xff0c;它是 Babel 工具链的核心组件之一。Babel 是一个 JavaScript 编译器&#xff0c;主要用于将 ECMASc…

数据结构——链表(单链表)

大家好&#xff0c;又是我&#xff08;小锋&#xff09;&#xff0c;今天给大家带了一个比较有挑战的章节&#xff08;链表&#xff09;&#xff0c;但是不用担心&#xff0c;小锋会陪大家一起度过。 顺序表的思考与问题 1. 中间/头部的插入删除&#xff0c;时间复杂度为O(N) …

rhcsa复习4

文件权限 文件的权限针对三类对象进行定义 owner 属主&#xff0c;缩写 u group 属组&#xff0c;缩写 g other 其他&#xff0c;缩写 o 每个文件针对每类访问者定义了三种主要权限 r &#xff1a; Read 读 - 文本文件 cat tac more less head tail paste d ls -l 列…

数字范围按位与

题目链接 数字范围按位与 题目描述 注意点 0 < left < right < 2^31 - 1包含 left 、right 端点 解答思路 返回区间内所有数字按位与的结果&#xff0c;所以区间内所有数字在某一位的值相同&#xff0c;则结果该位数字为该值&#xff0c;否则该位数字为0&#xf…

【漏洞复现】XETUX 系统 dynamiccontent 接口处存在远程代码执行漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

xftp突然无法连接虚拟机

问题描述 使用xftp连接虚拟机的时候一直显示 连接xxx.xxx.xx.xx失败 问题原因查找 首先打开本地cmd命令提示符 ping 你的虚拟机ip地址 我的是 ping 192.168.xx.xx 显示请求超时 解决方案&#xff1a; 点击打开更改适配器选项 右键vmnet 8——属性 如图前四个选项必选 单…

docker环境配置过程中的常见问题

1、pull镜像问题 docker pull jenkins/jenkins:lts Using default tag: latest Trying to pull repository docker.io/library/centos ... Get https://registry-1.docker.io/v2/library/centos/manifests/latest: Get https://auth.docker.io/token?scoperepository%3Alibr…

液体和固体介质的电气特性

本篇为本科课程《高电压工程基础》的笔记。 液体和固体介质广泛应用于高压电气设备内&#xff0c;作为设备的内绝缘。描述电介质的电气特性的四大参数是介电常数 ε \varepsilon ε、电导率 γ \gamma γ、介质损耗角正切 tan ⁡ δ \tan\delta tanδ和击穿场强 E b E_b Eb​。…

【智能家居项目】RT-Thread版本——DHT11获取温湿度 | MQTT上传到服务器 | 服务器控制外设

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《智能家居项目》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 这篇文章中&#xff0c;本喵将使用RT-Thread Studio来实现这个智能家居的项目&#xff0c;最终…

词令外卖节红包天天神券每天领取直达入口

词令外卖节红包天天领直达入口 1、打开「词令」关键词口令直达微信小程序&#xff1b; 2、输入词令「外卖红包88」关键词直达口令&#xff1b; 3、搜索直达进入外卖红包天天领入口&#xff0c;即可成功领取外卖节红包和天天神券点外卖可享受券后价优惠&#xff1b; *温馨提醒&…

故障诊断模型 | 基于多信号融合和改进的深度卷积生成对抗网络的不平衡数据故障诊断方法

文章目录 文章概述模型描述参考资料文章概述 本文提出了一种解决数据不平衡问题并提高诊断准确性的诊断方法。首先,通过小波变换处理来自多个传感器的信号,以增强数据特征,然后通过池化和拼接操作对其进行压缩和融合。随后,构建改进的对抗网络来生成新的样本进行数据增强。…

C#预处理器指令(巨细版)

文章目录 一、预处理器指令的基本概念二、预处理器指令的基本规则三、C# 预处理器指令详解3.1 #define 和 #undef3.2 #if、#else、#elif 和 #endif3.3 #line3.4 #error 和 #warning3.5 #region 和 #endregion 四、高级应用&#xff1a;预处理器指令的最佳实践4.1 条件编译的最佳…

.Net 知识杂记

记录平日中琐碎的.net 知识点。不定期更新 目标框架名称(TFM) 我们创建C#应用程序时&#xff0c;在项目的工程文件(*.csproj)中都有targetFramework标签&#xff0c;以表示项目使用的目标框架 各种版本的TFM .NET Framework .NET Standard .NET5 及更高版本 UMP等 参考文档&a…

公司服务器被.rmallox攻击了如何挽救数据?

公司服务器被.rmallox攻击了如何挽救数据&#xff1f; .rmallox这种病毒与之前的勒索病毒变种有何不同&#xff1f;它有哪些新的特点或功能&#xff1f; .rmallox勒索病毒与之前的勒索病毒变种相比&#xff0c;具有一些新的特点和功能。这种病毒主要利用加密技术来威胁用户&am…