vue对后台返回的长报错信息做html排版整齐显示

已于 2023-08-02 16:03:04 修改
阅读量288 收藏
点赞数
文章标签： vue.js html javascript
于 2023-07-28 11:24:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AllenChou869/article/details/131976536
版权
文章展示了在Vue中处理错误信息的函数，`vueh`函数用于显示错误详情。当调用`errorInfoModel`方法时，它会弹出一个包含错误信息的对话框，这些信息包括行号、缺失或格式错误的字段如品规名称、关联品规、数量和日期等。
摘要由CSDN通过智能技术生成
vue h函数
1.返回信息加上<br/>：

{
    "resultCode": "0",
    "data": null,
    "dataCount": 0,
    "resultMessage": " 行号：1 品规名称(中文)为空！<br/>  行号：1 关联品规名称(中文)不存在！<br/>  行号：1 报损数量为空！<br/>  行号：1 库存数量为空！<br/>  行号：1 在途数量为空！<br/>  行号：1 机构编码为空！<br/>  行号：1库存日期为空或格式错误！<br/>  行号：2 品规名称(中文)为空！<br/>  行号：2 关联品规名称(中文)不存在！<br/>  行号：2 报损数量为空！<br/>  行号：2 库存数量为空！<br/>  行号：2 在途数量为空！<br/>  行号：2 机构编码为空！<br/>  行号：2库存日期为空或格式错误！<br/>  行号：3 品规名称(中文)为空！<br/>  行号：3 关联品规名称(中文)不存在！<br/>  行号：3 报损数量为空！<br/>  行号：3 库存数量为空！<br/>  行号：3 在
}

2.直接写方法

// 弹出对话框

      errorInfoModel(resultMessage) {

        const modal = this.$success({

          title: '报错明细',

          content:(h) => {

            return h('div', {

                

                // style:{

              //   width:'550px'

              // },

              domProps:{

                innerHTML: resultMessage

              },

            }, [])

          }

        })

      }

linpeng.zhou
关注
Vue3 - 安装依赖报错 ERESOLVE unable to resolve dependency tree | While resolving: x（vue3 install 安装项目依赖报错）
王佳斌
04-27 3914
vue3，vite，安装依赖报错，vue3装包失败，vue3执行install安装依赖包时报错，npm install，yarn install，如何解决vue3报错，vue3项目装不上依赖怎么办，npm ERR! code ERESOLVE，npm ERR! ERESOLVE unable to resolve dependency tree，npm ERR! While resolving，无法解决怎么办，vue3一直报错，装项目依赖报错，详细解决教程，vue3终端报错，强力解决方法，解决方法，项目没办
vue3+vite - 报错TypeError: Failed to fetch dynamically imported module: xx，vue3项目报错无法获取动态导入的模块，vite报错！
高级前端工程师
07-06 2293
vue3，vite，vite-plugin-vue，nuxt3，报错，TypeError: Failed to fetch dynamically imported module，无法获取动态导入的模块，vue3打包报错，vue3编译运行报错，如何解决错误，vite build打包以后报错Failed to fetch，Vue3报错详细解决，Vue3+TS错误解决，换浏览器，清缓存，退出登录重新登陆，文件路径没写对，要么是没加组件名的后缀vue，路径写错了，加了setup语法糖导致的这个报错，eslint，
VUE渲染后端返回含有script标签的html字符串示例
10-16
今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用v-html展示后端返回的html内容
热门推荐
chenjxj123的博客
02-15 2万+
使用v-html展示后端返回的html内容，并解决js不执行问题 在UI平台开发的过程中，因为测试报告是在后台生成的，需要将测试报告整个进行返回到前端进行展示，但是vue不能像原生html一样直接展示render返回的响应页面，所以笔者借助v-html进行展示。具体写法如下： <div ref="reportHTML" v-html="htmlText" class="web-con"></div> <script> data(){ return{ ht
vue中用v-html根据后端返回结果设置样式
Vivien_CC的博客
12-18 1486
一、问题一、问题1=====》今日遇到一个需求，是一个表格列返回状态status，并拥有多种不同颜色。2=====》平日里见到的基本都是返回01234......前端用插槽放进去，根据数字去判断显示字段以及设置不同样式，今天看到的是后端直接返回一个字符串，像这样：3=====》因此这一次我们不再需要根据字段去判断，而是直接写样式就行。=====》于是乎，我用了v-html把它放了进去，并直接在style下面写class相应的样式。
vue提醒及错误弹框改变其显示的位置
qihangVIP4的博客
09-13 1376
vue提醒及错误弹框改变其显示的位置 单页面配置 mounted(){ this.$message.config({ top: '120px', // 距离顶端120px,可修改成自己想要的 duration: 2 // 弹框显示的秒数 }) } 全局配置 main.js 进行引入 Vue.prototype.$Message.config({ top: '120px', duration: 3 }); 组件窗口随浏览器窗口随意变动大小 <quer
vue前端将从后端取出来的html内容解析显示再前端
qq_53825610的博客
08-21 1600
【代码】vue前端将从后端取出来的html内容解析显示再前端。
vue报错分析
weixin_46202648的博客
12-14 2123
vue报错分析一、缺少依赖包(style-loader、css-loader)1、异常截图2、手段3、成功安装以下依赖包（style-loader@2.0.0、css-loader@0.28.11、stylus-loader@5.0.0,得去了解这些包的作用)4、运行项目没有再报这种错误二、导入的依赖包变灰1、异常截图2、手段3、最终结果三、this getOptions is not a function1、异常截图2、解决手段3、运行结果四、渲染不出挂载页面1、异常截图2、原因：vue无法识别你写的v
Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王佳斌
12-16 1万+
vue3，vite，报错解决，vue3+vite报错require is not defined，vue3 vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3 vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“require is not defined”问题，vite项目require语法兼容问题解决 require is not define
Vue 开发中常见报错与处理
←か淡定☆ ヾ 的博客
01-02 6737
1. “xxxx” is assigned a value but never used.eslintno-unused-vars 错误原因：eslint的验证语法 解决办法：在错误语句后添加注释 // eslint-disable-line no-unused-vars
vue MessageBox的提示信息换行居中显示，而title和按钮不居中显示 ,换行
weixin_46087919的博客
02-01 1943
element中MessageBox消息提示内容换行显示
vue处理后端返回的日志
活宝小娜的博客
04-03 669
vue处理后端返回的日志，并保持日志内容最新
Vue----Vue的模板语法
redrose2100的博客
06-20 995
可以在新建的Vue项目中体验Vue的模板语法，新建项目中将src/components文件夹删除，然后将src/App.vue文件清空并将上述代码放入，此外将man.js中的导入样式的雨具，即 import ‘./assets/main.css’ 也删除，然后运行项目，即可在浏览器中看到项目运行结果，如下图所示。Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上，所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。
【Vue】登录功能中对于错误提示信息的重构
Jerryqjr的博客
06-15 1097
在 Axios 中，res 和 e 参数分别代表成功的响应对象和错误对象。这些参数是由 Axios 在请求完成时传递给响应拦截器函数的。让我们深入了解一下这些参数是从哪里来的，以及 Axios 如何处理它们。res 和 e 参数的来源成功的响应 (res)当 Axios 发出一个 HTTP 请求并成功接收到服务器的响应时，它会将该响应对象传递给 onFulfilled 函数。这个响应对象包含了从服务器返回的所有数据和元信息。res => res.data, // `res` 是成功的响应对象。
vue中给v-html返回的元素添加css样式
zyf971020的博客
03-09 965
vue中给v-html返回的元素添加css样式
vue后端返回dom数据，动态放入v-html中，无法被css样式覆盖
qq_39594951的博客
01-18 1008
1.我们通常会根据后端爬取的dom数据动态插入到页面中，在vue中我们一般会使用v-html标签 例如： <div class="infomation"> <ul> <li><span>来源：{{info.news}}</span></li> <li><span>发布时间：{{i
在vue中后台返回的文本包含标签如何解析为html
weixin_49279406的博客
08-27 4087
在项目中遇到解析html，发现v-html并不满足复杂的渲染，就使用jq来处理 1.v-html 处理简单的标签 如：text= " <p>vue转换</p> " html中解析： <p v-html="text">{{text}}</p> 2.返回标签中还有img、a标签，使用v-html就不会转换方法如下： 使用jquery处理: 1.在标签定义class <div class="descript"></div> 2.安
element-ui中，使用this.$message.success(“登录成功“)，如何修改文字的样式呢？
最新发布
lj_1598的博客
10-22 994
element-ui中，使用this.$message.success("登录成功")，如何修改文字的样式呢？
Vue 解决element-ui 文件上传、下载，接口返回错误信息，弹框提示错误信息
皮卡丘
04-12 2594
1、需要在顶部用 import { Notification, MessageBox, Message } from ‘element-ui’，将需要用到的弹框MessageBox或Message 引入否则无法触发弹框效果；在开发中经常会遇到文件在上传、下载后端接口有时候会返回非文件流的错误信息，需要进行弹框提示，我们统一放到request.js文件中在响应拦截器里进行处理。3、弹框提示根据接口返回是否是code（我的项目是errCode，错误信息是errMsg）
vue项目/deep/报错
02-03
当您在Vue项目中遇到报错时，可以尝试以下步骤来解决问题： 1. 首先，查看报错信息。报错信息通常会提供一些关键的线索，帮助您定位问题所在。请确保仔细阅读报错信息，并理解其中的错误提示。 2. 检查代码。根据报错信息，找到引发错误的代码位置。检查该代码段是否存在语法错误、逻辑错误或其他潜在问题。确保代码的正确性。 3. 检查依赖项。有时，报错可能是由于依赖项版本不兼容或缺失引起的。请检查您的项目依赖项，并确保它们的版本与您所使用的Vue版本兼容。 4. 检查配置文件。Vue项目通常包含一些配置文件，如webpack配置文件或babel配置文件。请确保这些配置文件正确配置，并且没有任何错误。 5. 搜索解决方案。如果您无法解决报错问题，请尝试在搜索引擎或开发社区中搜索相关问题。很可能其他开发者已经遇到过类似的问题，并提供了解决方案。 如果您能提供具体的报错信息或代码片段，我可以更具体地帮助您解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值