- 博客(73)
- 资源 (5)
- 收藏
- 关注
原创 el-upload 上传图片转成base64 字符串,传给后端,且base64在页面的展示
【代码】el-upload 上传图片转成base64 字符串,传给后端,且base64在页面的展示。
2024-07-22 11:00:47
1072
原创 纯前端实现将页面数据下载word文档中【包括图片,echarts图,表格,和对话 内容】
在Vue中导出Word文档,可以使用第三方库file-saver和html-docx-js。
2024-05-20 10:27:05
670
2
原创 vue更新数据
在 Vue 中,一个数组在更新时,如果数组里的元素是数组或对象的话,需要注意数组或对象的引用关系。如果这些数组或对象被修改,但数组本身的引用没有发生变化的话,Vue。是不会检测到这些变化的,因为 Vue 只会对数据做浅层次的检测。
2023-05-23 15:02:57
965
原创 vue中给@相关的事件传递“额外“参数
暴露给父组件的方法,因业务场景的需要,需要在父组件中传递额外的参数,这时该方法又有子组件传递过来的参数,需要在不改变该方法默认参数的情况下,额外传递参数,使用。场景:在开发中会遇到,当通过this.event 来传递,即可解决当前问题。
2023-05-23 14:55:33
1325
原创 解决cnpm无法加载文件
问题描述解决cnpm无法加载文件好不容易安装好了cnpm,结果运行cnpm -v的时候又报错cnpm : 无法加载文件C:\Users\14164\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行 脚本。有关详细信息,请参阅https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。原因: 系统禁止运行脚本解决方案:快捷键:win+R —打开窗口输入;Power
2022-04-21 10:37:01
879
原创 webstorm如何调试vue项目的js
安装webstorm下载安装https://www.jetbrains.com/webstorm/个性化设置,页面与快捷键可以导入http://blog.csdn.net/wm5920/article/details/76566114这里的jar包license server激活地址修改webpack.dev.conf.js将devtool: config.dev.devtool改为devtool: 'source-map'...
2022-04-20 15:36:33
1090
原创 JDK1.8安装和环境配置
安装1、运行JDK安装包jdk-8u181-windows-x642、进入开始安装向导界面,单击下一步。如图所示。3、选择jdk安装目录。单击“下一步”。4、开始安装,等待安装完成。5、单击确定,继续安装。6、默认选择,单击“下一步”。7、等待安装完成。如图所示。8、安装完成。点击“关闭”。接下来配置环境变量。9、配置环境变量。打开控制面板,选择“系统和安全”,选择“系统”,选择“高级系统设置”。如图所示。10、打开后,选择“环境变量”。如图所示。环境变量配置11
2022-04-19 11:42:15
11866
原创 js异步编程
promiseJs中进行异步编程的新的解决方案(传统的解决方案——回调函数和事件),用于表示一个异步操作的最终完成 (或失败), 及其结果值.。promise 有三种状态Pending(进行中,初始状态,既不是成功,也不是失败状态。)、Resolved(已完成,又称 Fulfilled)、Rejected(已失败)这三种状态的变化途径只有2种: 异步操作从 未完成 pending => 已完成 resolved 异步操作从 未完成 pending =>失败 rejected 状态
2022-03-29 17:10:40
108
原创 vue.js中的computed计算属性如何传递参数
omputed:注意不能直接在photoList后面加参数,没效果(应该是vue不支持),应该以JavaScript闭包的形式:computed: { photoList() { return function(value){ var imgList = []; for(var i=0;i<value.length;i++){ imgList.push({src: value[i]});
2022-03-29 17:00:48
2010
原创 vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的路劲在vue中通过js加载图片路径需要用 require() 加载图片路径<img :src="titleIcon" class="title-icon">{{ title }}</img> computed: { titleIcon() { r...
2022-03-28 10:35:32
1593
原创 接口实现表格上传和下载
下载excel表格/** * 1. 接口调用 * @param {*} data url * @param {*} filename 名称 */export function downloadExcel() { getExcel().then( res => { const blob = new Blob([res.data], { type: '' }) downloadFileWithBuffer(blob, 'demo.xlsx') })
2022-03-28 10:23:14
445
原创 前端实现打印功能(纯前端实现)
使用插件 vue-print-nb第一种方法:通过npm 安装插件1,安装install vue-print-nb --save2,引入 安装好以后在main.js文件中引入import Print from 'vue-print-nb' Vue.use(Print); //注册3,现在就可以使用了<div id="printTest" > <p>锄禾日当午</p></div><button v-print="'#pri
2022-03-28 10:06:49
1401
原创 JS中将相同属性的对象合并成一个数组
原数组如下let resData = [ { "name": "住院医疗最高报销", "tagName": "医疗", "insuredAmount": "6000" }, { "name": "身故赔付", "tagName": "寿险", "insuredAmount": "36.00" }, { "name": "烦死了免费陈.
2022-03-23 14:54:20
375
原创 element-ui table 表格组件合并相同行
效果如下代码<template> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="lv1" label="一级巡查项"/> <el-table-column prop="lv2" label
2022-03-16 14:16:22
1202
原创 Vue中父子组件生命周期执行顺序(父子组件和mixins的生命周期执行顺序)
父子组件生命周期执行顺序结论父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载。执行顺序父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted复制代码子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted中获取api的数据,子组件的mounted是拿不到的。父子组件和mixins的生命周期执行顺序执行顺序mixin的crea
2022-03-15 11:45:51
1855
原创 vue前端导出(XLSX)
import XLSX from 'xlsx'exportExcel() { let exportTableData = [] let tmpCon = [] let propList = [] this.columnData.forEach(column => { tmpCon.push(column.label) propList.push(column.prop) }) exportTab
2022-03-11 14:28:48
1345
原创 webstorm常用的插件
GitToolBox其实就是给 ide 扩展了一下 git 相关的功能,比如会自动帮你 fetch 最新的代码(我之前都是两下 shift,然后输入 fetch查找到对应的命令然后回车,麻烦),单行代码后面显示提交信息等等。RainBow Brackets可以把括号变成彩色的,更便于阅读。Json Parser前端开发者一般情况下接触到JSON格式特别多,但是每次想要格式化JSON数据都需要通过打开浏览器到对应的格式化网站,通过这个插件,你可以直接在IDE中进行格式化。TabNi
2022-03-02 09:56:15
10838
原创 多个接口可以封装成一个接口处理
在开发中会遇到这样的修求,可能一个页面会根据不同的情况会请求多个接口,返回一样的结果。如果各个接口分别编写一次,先的很搂,并且代码冗余。那么分装成一个方法来请求。解决办法:其实就是将写一个方法,return请求接口,用另一个方法来接收结果分装后的代码import {saleDeptAnalysis,userAnalysis,contractIndustry} from '@/api/bi/customer' //接口/** * 查询表格数据,接口接口返回的数据 * @par.
2022-03-01 17:53:10
1857
原创 vue组件多层级传值(爷爷组件和孙子组件直接传值)+provide + inject
有时一个页面,其实由许多组件构成,并且这些组件,层层嵌套,层次可能很深。这时问题就来了,假如有一些参数,从顶层组件就开始设置或提供,然后最底层的组件又需要,层层传递,不仅繁琐、容易出错,反而不利于代码的可维护和可读。有没有一种方法,可以直接由顶层组件传播到最底层呢?或者说,可以让最底层能直接接收到顶层的参数呢?有的,provide + inject。顶层组件provide,底层组件inject。但是,这只能保证一次成功,以后参数改变了,底层并不能感知。这时又要加上computed和watch,并且参.
2022-03-01 13:51:10
854
原创 vue中使用插件实现excel导出
1. 安装相关依赖主要是两个依赖npm install --save xlsx file-saver2.组件里头引入import FileSaver from 'file-saver'import XLSX from 'xlsx'3.调用 exportExcel () { var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) var wbout = XLSX.wri
2022-02-28 15:56:11
618
原创 linux操作指令
删除文件使用:rm命令参数:-r 向下递归,不管有多少级目录,一并删除;-f 直接强行删除,不作任何提示的意思例如: rm -rf public -m :斜杠开头表示参数重命名文件或文件夹:mvmv dist public表示:将文件夹dist重命名为public复制文件或文件夹:cpcp ./public/ wkcrm:/opt/package/gateway/表示:将public文件以及文件里的文件复制到路径geteway下 cp后跟路径切换路径:cdcd
2022-02-24 20:21:40
444
原创 git学习
git cherry-pickgit cherry-pick :将一个分支的一条记录提交到另一个分支上例如:第一步:git cherry-pick e6476aaaa1be9415e5ab223520f6b068d82dbd2b第二步:git pull (推送)单个commit只需要git cherry-pick commitid多个commit 只需要git cherry-pick commitid1..commitid100......
2022-02-24 16:45:59
84
原创 elelment ui 动态渲染表头和表格数据
<el-table :data="columnList" :height="400" :loading="tableLoading" stripe border highlight-current-row> <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.prop" :label="item.label" a.
2022-02-22 14:30:04
960
原创 vue中mixins的用法(混入对象的使用)
作用 多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数会两个都被调用,mixin中的钩子首先执行。vue中的mixins可以定义哪些内容呢?官网的说明:混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。大致意思就是:1) 混入对象的内容必须是一个对象。2) 当使用混入时,相同的内容都会合并。3) 数据对象如果有相同的,则以被混入的对象中data数据为准注意:1
2022-02-18 18:22:45
1190
原创 vue中监听路由和路由参数的变化
问题描述在同一个路由下,只改变路由后面的参数值 / 改变路由,比如 /test?id=1 ,在这个页面中点击一个按钮后 跳转到 /test?id=2 ,但从“/test?id=1”到“ /test?id=2”是不会触发vue的生命周期的,id变了,但页面数据不会更新。解决办法监听路由参数的变化,在watch里监听$route和路由参数watch: { $route(){ this.userId= this.$route.query.id }, }...
2022-02-18 18:05:13
1111
原创 computed和watch的使用场景和区别
使用场景watch和computed各自处理的数据关系场景不同1.watch擅长处理的场景:一个数据影响多个数据2.computed擅长处理的场景:一个数据受多个数据影响区别```javascript1、功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。2、是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。3、是否调用return:compu
2022-02-17 16:35:19
1306
原创 Vue计算属性computed传递参数
computed:注意不能直接在photoList后面加参数,没效果(应该是vue不支持),应该以JavaScript闭包的形式:computed: { photoList() { return function(value){ var imgList = []; for(var i=0;i<value.length;i++){ imgList.push({src: value[i]}); .
2021-12-06 21:51:31
950
公司离职证明模板文件下载
2020-04-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人