vue 字符串内容格式化显示并添加序号

最新推荐文章于 2024-08-14 14:54:53 发布
最新推荐文章于 2024-08-14 14:54:53 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syx_cainiao/article/details/114368689
版权
本文介绍了在Vue中如何处理返回的错误数据，将字符串内容格式化显示并添加序号。当导入数据失败时，后台返回错误信息字符串，通过使用`pre`标签进行初步格式化。为实现数据添加序号，需要将字符串转换为数组，使用`.map()`遍历并在每条错误信息前插入序号。
摘要由CSDN通过智能技术生成

最近写代码遇到了返回数据 格式化显示的问题
场景：当点击导入模板按钮导入数据失败时，后台会返回模板中数据填报错误地方的数据
页面显示：在这里插入图片描述
返回数据：
“共失败导入13条数据；\ n项目名称： vue显示内容格式化1， 项目进度必填；\ n项目名称： vue显示内容格式化2， 项目进度必填；\ n项目名称： vue显示内容格式化3， 项目进度必填；\ n项目名称： vue显示内容格式化4， 项目进度必填；\ n项目名称： vue显示内容格式化5， 管理类别必填；\ n项目名称： vue显示内容格式化6， 管理类别必填；\ n项目名称： vue显示内容格式化7， 管理类别必填；\ n项目名称： vue显示内容格式化8， 管理类别必填；\ n项目名称： vue显示内容格式化9， 管理类别必填；\ n项目名称： vue显示内容格式化10， 管理类别必填；\ n项目名称： vue显示内容格式化11， 管理类别必填；\ n项目名称： vue显示内容格式化12， 管理类别必填；\ n项目名称： vue显示内容格式化13， 管理类别必填；\ n”

要求：数据格式化显示，并在每条错误信息前添加序号

数据格式化简单，因为在字符串数据中每条数据是有\n换行符，所以直接可以用pre标签进行格式化显示
代码：

<el-dialog title="提示" :visible.sync="importPrompt" :close-on-click-modal="false"
最低0.47元/天 解锁文章
syx_cainiao
关注
专栏目录
前端网页技术之 Vue
cgblpx的博客
08-02 5万+
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde
vue项目使用xlsx-style导出自定义格式excel
boboboke
02-22 7116
一.遇到问题 1.给自定义格式的excel中的合并单元格加边框的时候,出现边框不完整的情况. 解决:将该合并单元格拆分成最小单位的单元格,设置其边框属性. 直接赋值的话不可行,因为子单元格并没有边框属性,只有合并单元格才有, 这里使用的方法是:记录合并单元格的属性信息, 然后循环对子单元格赋值. 代码: function addRangeBorder(range,ws){ let arr...
ruoyi-vue版本（二十二）工具类，字符串格式化
一天不写代码难受的博客
05-27 346
以下就是一个工具类，直接复制到你的项目里面进行使用就可以。
vue使用过滤器格式化字符串
m0_74637610的博客
11-12 449
vue使用过滤器格式化字符串
vue 项目commit自动格式化
最新发布
weixin_40565812的博客
08-14 820
在 Vue 项目中，全局格式化（通常指的是代码格式化、样式格式化、数据格式化等）是一个重要的实践，它有助于维护代码的一致性和可读性，促进团队协作，减少因格式不一致导致的合并冲突，以及提高代码质量。
字符串格式化和列表操作
weixin_46356321的博客
01-10 1151
字符串格式化和列表操作1、字符串format()格式化方法1、创建列表2、访问元素3、修改元素4、删除元素5、常用函数6、切片7、列表的内置方法 1、字符串format()格式化方法 格式化输出: 方法一： 字符串里边有一部分是动态变化的。 format函数： {} 占位符 替换占位符的时候，可以是任意类型。 format函数：字符串.format(第1个值，第2个值，第3个值) 代码如下： print("大家好！我叫{}，来自{}".format("十七", "上海")) # 结果输出：大家好！我叫十七
vue 日期字符串格式化
好巧的博客
01-14 6940
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。建议在 src 目录下新建一个 common 文件夹，新建 date.js 文件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
vue js如何生成序号生成 0010 0020
06-13
要生成类似于“0010”、“0020”这样的序号，可以使用Vue.js的计算属性和字符串格式化方法来实现。具体步骤如下： 1. 在Vue实例的data中定义一个数字变量，例如：num: 10。 2. 在Vue实例中定义一个计算属性，用来...
详细总结流行前端框架Vue重难点概念_vue难点
2401_84435942的博客
05-04 870
props | 配置 | 该属性用于接收来自父组件的数据 |表2.1注：计算属性与方法的区别：前者基于缓存的。只在相关响应式发生改变时计算属性才会重新求值，即只要响应式不变，多次访问计算属性会立即返回之前缓存的计算结果，而不必再次执行函数；而每次访问方法都会重新执行函数，从效率来看，计算属性优于方法。
JS给Textarea文本框添加行号的方法
01-19
本文实例讲述了JS给Textarea文本框添加行号的方法。分享给大家供大家参考。具体如下： 这里使用JS实现让Textarea文本框显示行号的功能，每一行的前面都会有下数字序号，如果用来显示代码的话，可以直接找到某一行，如果不显示行号，则还要自己手功去查，想要此功能，你只需设置好TextArea ID，并加入代码中的JavaScript代码部分即可，文本框的长宽则是由CSS来控制的，你可试着修改一下，长宽的显示要与JS相匹配。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-textarea-show-row-num-codes/ 具体
js实现格式化JSON数据方法
baby_duoduo的博客
09-14 8747
最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来，方便用户配置。一开始单纯的将数据格式写入到pre标签中， 但是通过pre标签写入的数据格式在代码可视化上不是很优雅。由于上述原因，所以就创建了一个全局的数据格式配置文件，通过es6 中的模板字符串来实现，这样就解决了代码可视化不优雅的问题。但是后面又增加了一个动态数据格式的需求，这样一来就不能通过模板字符串来 解决了，所以就有了这篇文章中讲述的通过js格式画JSON数据的方案，这篇文章旨在记录方案实现的方法，方便自己 以后遇到同样的需求直
Vue实现JSON字符串格式化编辑器组件
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
01-02 2601
1、自动补全输入”(“、”{“、”[“将会自动补全另一半2、自动删除删除括号时也会自动删除另一半3、括号匹配点击括号会高亮另一半括号，方便定位4、支持ctrl+z撤销和ctrl+y重做功能5、编辑器根据字符串的换行计算行号并展示这个JSON编辑器不仅能够让你方便地格式化JSON字符串，还能帮你去掉不必要的空格。而且，它的全屏功能让编辑更加顺畅。最酷的是，它还能实时告诉你格式化的进度，如果遇到问题了，控制台会详细告诉你哪里出错了，这样你就能快速找到问题并解决它。
vue+Ant 对字符串时间进行格式化
Canon80的博客
05-11 410
如需格式化为：YYYY-MM-DD HH:mm:ss。即可将时间格式化为：YYYY-MM-DD。
vue代码格式化，vetur的代码格式化设置,保存时（ctrl+s）格式化代码，不加；和将 ‘ (单引号) ,改为 “ (双引号)
2302_77492264的博客
06-24 1103
在Vue开发中，代码格式化是提高代码可读性和可维护性的重要环节。使用合适的代码格式化工具，可以确保团队中的每位成员都遵循统一的代码风格，减少不必要的风格冲突。其中，Vetur是一个为Vue提供丰富开发体验的VSCode插件，它内置了代码格式化功能，使得Vue代码的格式化变得简单易行。
给文本框textarea加序号
weixin_41673550的博客
08-09 1405
效果图如图 <div class="key-word-textarea flex"> <div class="text-area-num-scroll"> <div class="text-area-num-box" ref="textAreaNumBox"> <div v-for="(t,i) in textAreaNum" :key="i" class="text-area-num">{{i+1}}</div> .
vue中的过滤器 文本格式化
qq_43096062的博客
08-06 1905
过滤器 Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下： {{ message | capitalize }} < div v-bind:id=“rawId | formatId”></ div> 过滤器函数接受表达式的值作为第一个参数。 以下实例对输入的字符串第一个字母转为大写： < div id=“app”> ...
vue 表单添加一列序号
WLiuNi的博客
09-26 1004
template内写： <el-table-column label="序号" prop="" width="100" align="center"> <template slot-scope="scope"> <span v-text="getIndex(scope.$index)"> </span> </template> </el-table-column> methods内写: ...
vue的字符串格式化
09-05
Vue的字符串格式化可以通过使用Vue的实例方法来实现。在引用中的代码中，可以看到有一个名为`dateFormat`的方法，它接受一个字符串参数`str`，并返回格式化后的日期字符串。 具体的实现步骤如下： 1. 首先，将传入的字符串参数`str`转换为一个`Date`对象。 2. 判断转换后的`Date`对象是否有效（即判断是否为一个有效的日期）。 3. 如果日期无效，则将传入的字符串按照"年-月-日"的格式进行拆分，然后进行格式化拼接。 4. 如果日期有效，则根据传入的格式字符串`fmt`，将其中的占位符（比如"YYYY"代表年份，"mm"代表月份等）替换成对应的日期部分。 5. 返回格式化后的日期字符串。 需要注意的是，上述的代码只是一个参考示例，实际的日期格式化方法可能有所不同，具体实现可根据需求进行调整和扩展。同时，还可以使用其他库或插件来实现日期格式化，比如moment.js等。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [vue字符串格式化时间格式，以及出现不同类型以及出现NaN问题(随手笔)](https://blog.csdn.net/yang_weidong/article/details/124324743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue.js 时间转换代码及时间戳转时间字符串](https://download.csdn.net/download/weixin_38657353/13202136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值