vue
聆听HJ
我们终于到了小时候最羡慕的年龄,但却没有成为小时候最想成为的人。
展开
-
使用XLSX.utils.sheet_to_json()解析excel,给空的单元格赋值为空字符串
使用XLSX.utils.sheet_to_json()解析excel,给空的单元格赋值为空字符串原创 2023-06-21 15:32:05 · 995 阅读 · 0 评论 -
element-ui el-table表格 IE下无法显示滚动条问题
element-ui el-table表格 IE下无法显示滚动条问题原创 2023-01-16 11:27:56 · 493 阅读 · 0 评论 -
vue更新数据却不渲染页面解决方案(vue数组值改变但页面不渲染)
vue更新数据却不渲染页面解决方案原创 2022-10-23 15:07:12 · 8184 阅读 · 0 评论 -
vue前端向list中的对象添加元素并赋值
vue前端向list中的对象添加元素并赋值原创 2022-06-28 11:22:38 · 2483 阅读 · 1 评论 -
Vue+Element 弹框 el-dialog
Vue+Element 弹框 el-dialog原创 2022-06-23 18:03:45 · 801 阅读 · 0 评论 -
vue Popover 弹出框
vue Popover 弹出框原创 2022-06-21 10:44:15 · 587 阅读 · 0 评论 -
Vue通过ref获取不到$refs
今天写项目时发现一个问题,就是明明已经定义了ref,但通过$refs打印却没有打印出想要的结果。代码如下<!-- html部分 --><div ref="myOrder" v-if="isOrder"></div>// js部分init () { console.log(this.$refs.myOrder) //undefined}打印结果是undefined。后来查阅资料后发现问题所在:ref所在的标签不要用v-if,使用v-show就好了。原创 2022-04-26 17:19:33 · 3006 阅读 · 0 评论 -
Vue使用vue-pdf进行PDF预览
<template> <!--安装依赖:npm install --save vue-pdf--> <div class='pdf'> <el-tabs @tab-click="handleClick" type="border-card"> <el-tab-pane label="全部加载" v-loading="loading" element-loading-text="加载中"> <Pdf.原创 2022-03-31 14:52:11 · 1293 阅读 · 0 评论 -
Request请求:Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String contains non ISO-8859-1 c
一、问题如下: 1、报错信息:Uncaught (in promise) TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.类型错误:未能在“XMLHttpRequest”上执行“setRequestHeader”:字符串包含非ISO-8859-1代码点。 2、截图如下:二、问题解决: 1、问题分析:.原创 2022-03-29 16:35:43 · 16565 阅读 · 0 评论 -
使用vue-pdf插件导致 Cannot read properties of undefined (reading ‘catch‘)解决办法
通过以下路径找到pdfjsWrapper.js文件并把全部代码修改为下面的代码就解决啦!vue_test(根目录)/node_modules/vue-pdf/src/pdfjsWrapper.jsimport { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service'; var pendingOperation = Promise.resolve(); export default function(PDFJS) { ...原创 2022-03-25 12:02:15 · 5409 阅读 · 7 评论 -
PDF文件流转图片保存在本地,vue前端展示该图片
//创建文件String url = EBaseInfoController.class.getClassLoader().getResource("/").getPath()+"static/qszqr/";log.info("pdf文件位置:"+EBaseInfoController.class.getClassLoader().getResource("/").getPath()+"static/qszqr/");//pdf命名String fileName = "qszqr_"+param.原创 2022-01-25 16:06:05 · 1421 阅读 · 0 评论 -
Java将二进制流转Base64字符串并在页面显示
/** * 二进制流转Base64字符串 * * @param data 二进制流 * @return images * @throws IOException 异常 */ public static String getImageString(byte[] data) throws IOException { BASE64Encoder encoder = new BASE64Encoder(); S..原创 2022-01-25 10:19:22 · 459 阅读 · 0 评论 -
用JS进行Base64编码、解码
window.btoa('china is so nb') // 编码"Y2hpbmEgaXMgc28gbmI="window.atob("Y2hpbmEgaXMgc28gbmI=") // 解码"china is so nb"原创 2021-12-28 16:59:14 · 533 阅读 · 0 评论 -
VUE 监听 对象属性值变化
监听一下对象formCode 中 属性 application 的变化:<script>export default{ data(){ return{ formCode:{ application:"", oldcode:"", newcode:"" } } }}</script>..原创 2021-12-28 11:49:11 · 1660 阅读 · 0 评论 -
Vue+Element-ui弹窗 this.$alert is not a function
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button></template><script> export default { methods: { open() { this.$alert('这是一段内容', '标题名称', { confirmButtonText: '确定',.原创 2021-12-27 14:10:25 · 2587 阅读 · 0 评论 -
localStorage本地存储防止参数丢失
例如:a页面跳转b页面1、在a页面存储参数localStorage.setItem('routerParams', JSON.stringify(pripid));2、在b页面获取参数localStorage.routerParams.replace(/\"/g, "")原创 2021-12-23 17:28:44 · 1290 阅读 · 0 评论 -
VUE跳转页面传值 地址栏显示参数或者不显示地址栏参数
添加路由{ path: '/Qyqxhx', component: Qyqxhx, name: 'Qyqxhx', meta: { title: '页面名称' } },params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示this.$router.push({name:'Qyqxhx',params: { id: pripid }})接收参数:this.$route.params.id.原创 2021-12-22 16:53:02 · 3949 阅读 · 0 评论 -
vue 搜索结果关键字改变颜色
//搜索结果关键字改变颜色eachColor(content,searchVal){ let nt='<span style="color:red">'+searchVal+'</span>'; return content.replace(searchVal,nt)+' ';},vue将HTML字符串解析为HTML标签<div v-html="rawHtml"></div> //v-html="变量".原创 2021-12-06 16:31:58 · 2020 阅读 · 0 评论 -
vue中使用element-ui,重复点击按钮或多个请求同时弹出多个message弹框解决方法
问题:解决方案:this.$message.closeAll(); this.$message({ message: '请输入企业名称、注册号或统一社会相应代码', type: 'warning' });原创 2021-10-28 14:05:38 · 969 阅读 · 0 评论 -
vue 导出表格所有数据
安装依赖 npm install -S file-saver npm install -S xlsx npm install -D script-loader相关js百度云下载链接:https://pan.baidu.com/s/1UfTZIQAIQKzAcZGDzwwdhw提取码:0326添加按钮点击事件<el-button icon="el-icon-download" @click="handleExcel">导出</el-button&g..原创 2021-08-10 11:59:23 · 445 阅读 · 0 评论 -
vue 将base64 的pdf文件流转换成pdf并预览
1、安装依赖:npm install vue-pdf --save-dev2、代码<template> <div class="main"> <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf> </div></template><script> //引入vue-pdf原创 2021-07-30 15:40:55 · 2664 阅读 · 1 评论 -
vue路由导航守卫动态改变标题
利用导航守卫beforeEach在每次页面跳转前更改对应的titleimport Vue from 'vue'import VueRouter from 'vue-router'import Hologram from '../components/qxhx/Hologram.vue'const routes = [ { path: '/', name: 'Hologram', component: Hologram, /*1.在route里面给每个路由加上m原创 2021-07-28 22:33:27 · 279 阅读 · 0 评论 -
vue解决使用history模式部署项目后页面刷新404问题
对于 Node.js/Express,请考虑使用connect-history-api-fallback 中间件1.在根目录安装中间件npm install --save connect-history-api-fallback2.引入中间件var history = require('connect-history-api-fallback');3.使用express来使用这个中间件var express = require('express');var app = expr.原创 2021-07-13 14:42:32 · 386 阅读 · 0 评论 -
vue导出excel百分比数值导出后自动转换为科学计数法问题
// 安装npm install --save xlsx file-saver // 组件里引入import FileSaver from 'file-saver'import XLSX from 'xlsx' // 方法export2excel () { /* '#mytable'关联导出的dom节点 */ var xlsxParam = { raw: true } //设置excel为文本格式解决百分比数值导出后自动转换为科学计数法 var wb = XLSX.原创 2021-07-13 14:18:12 · 1222 阅读 · 2 评论 -
vue+element 导出表格使用el-table的fixed属性,导致数据重复
分析:我使用了el-table的fixed属性来让某一列固定,但elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出,导致数据重复。//导出 export2excel () { /* '#export2excel '关联导出的dom节点 */ var fix = document.querySelector('.el-table__fixed'); // 判断要导出的节原创 2021-07-13 11:41:36 · 1946 阅读 · 0 评论 -
vue+element 导出表格
// 安装npm install --save xlsx file-saver // 组件里引入import FileSaver from 'file-saver'import XLSX from 'xlsx'// 方法export2excel () { /* '#mytable'关联导出的dom节点 */ var wb = XLSX.utils.table_to_book(document.querySelector('#mytable')) /* get bi.原创 2021-07-13 11:26:22 · 177 阅读 · 0 评论 -
vue element UI el-table 表格行高样式调整
<el-table :data="tableData" ref="recordTable" border style="width: 100%; " :cell-style="{padding:'6px 0px'}" :row-style="{height:'45px'}" :header-cell-style="{'text-align':'center','background-color': 'white'}">.............</el-table>.原创 2021-07-06 10:59:39 · 1264 阅读 · 0 评论 -
vue 使用history去掉地址栏url中的#
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{ meta: { title: '电梯基本信息查询' }, path: '/ElevatorDimension', name: 'ElevatorDimension', component: () => import('../components/ElevatorQuery/Elevato.原创 2021-06-29 16:11:11 · 509 阅读 · 0 评论 -
Vue中this.$router.resolve实现页面跳转并传参(在新窗口打开页面)
let lybl = '';lybl = this.$router.resolve({path: 'EnterpriseReport',query:{ ancheid: id , ancheyear: ancheyear}})window.open(lybl.href, '_blank');原创 2021-06-10 15:33:47 · 12217 阅读 · 0 评论 -
vue ui命令没反应
原因:版本太低版本低于3时没有ui功能 查看版本号vue -V 查看是否有ui功能vue -h 查看commands,发现没有ui [oprions]的选项 安装最新的脚手架 cnpm i -g @vue/cli 安装最新的脚手架后发现已经有ui [oprions]的选项了 vue ui命令可以正常使用...原创 2021-03-11 10:19:02 · 237 阅读 · 0 评论 -
vue修改浏览器的标题title
利用导航守卫beforeEach在每次页面跳转前更改对应的titleimport Vue from 'vue'import VueRouter from 'vue-router'import Hologram from '../components/qxhx/Hologram.vue'const routes = [ { path: '/', name: 'Hologram', component: Hologram, /*1.在route里面给每个路由加上m原创 2021-03-11 09:51:41 · 981 阅读 · 0 评论 -
自定义element-ui loading 加载动画
//在 app.vue 文件中设置.el-loading-spinner { background-image:url('../assets/loading_images/loading.gif'); //加载动图 background-repeat: no-repeat; //设置背景图不重复 height:100%;//图片高度 background-position:center; //设置背景定位为居中 top:0; //覆盖element-ui默认的50%,因为此处.原创 2021-02-07 14:37:48 · 1213 阅读 · 0 评论 -
vue 数组中添加对象
//定义个一个数组GridLayout: []//数组中添加一个对象this.GridLayout.push({ 'content': [ { 'span': 24, 'url': 'www.1.com', }, ] },)原创 2021-01-19 16:23:09 · 18725 阅读 · 0 评论 -
vue股权穿透图
<template> <div class="penetrate-chart"> <div id="penetrateChart"> </div> </div></template><!--关联图谱图--><script> import html2canvas from 'html2canvas' // 过渡时间 const DURATION = 0 // 加减符号.原创 2021-01-19 16:16:26 · 6168 阅读 · 7 评论 -
Element中el-slider设置刻度
html模块:<el-slider class="self_slider" v-model="value" range :max="31" :min="1" :format-tooltip="formatTooltip" :marks="guideMarks"></el-slider>computed:computed: { guideMarks() { let marks = {}; for (let i = 0; i <= 160;原创 2020-11-24 15:56:24 · 7685 阅读 · 0 评论 -
vue实现鼠标移入移出显示或者隐藏div
<--html--><div class="model" @mouseenter="enter" @mouseleave="leave"> <img src="../../assets/portalImg/功能导航.png" /> <span>功能导航</span></div><div class="popUp" v-show="seen" @mouseenter="enter" @mouseleave="leave".原创 2020-11-18 15:02:37 · 10269 阅读 · 0 评论 -
vue 描点定位以及滚动描点定位
<template> <div class="main" > <div class="Navigation"> <!-- 导航 --> <div class="Navigationtitle"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleOpen"> &l.原创 2020-11-13 11:08:13 · 647 阅读 · 1 评论 -
span内容溢出显示省略号,鼠标悬浮可显示完整span内容
span内容溢出显示省略号<div class="content"> <span :title="item.sydw">使用单位: {{item.sydw}}</span></div>span{ width:300px;/*设置显示的最大宽度*/ overflow:hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*超出部分省略号表示*/ white-space:nowrap;/*强制单行显示*/ wor原创 2020-11-10 19:41:08 · 2941 阅读 · 1 评论 -
Vue中this.$router.push实现页面跳转并传参
this.$router.push({ path: 'logicalmaptow', //跳转的页面的path(和路由中path对应) query: { buildingNumber: this.communityName+'-'+buildingNumber //参数传递 }})原创 2020-10-22 15:40:07 · 737 阅读 · 1 评论