BluerCat的博客

前端或后端导出文件，可以看自己需求。数据量比较少的时候，或页面展示的是所有数据的时候，使用前端js直接导出文件，比较方便，因为不用重查接口，减少了交互。若数据量比较大，或页面展示的是分页时，推荐走后端接口导出文件，因为没法拿到完整的数据，而且大数据量从接口返回到前端，对前端负担也不友好。背景：最近vue项目遇到一个需求，就是需要将多个表格分成不同sheet页并导出，之前的工具类只能导出一个sheet页，所以在原有的基础上，调整一下，让它支持多sheet导出。

背景：将tab页面缓存，例如A页面输入123，通过tab标签跳转到B页面，再点击A标签，跳转回A页面，这时需要保留输入的123。本来，直接使用keep-alive就行了，但是这几个路由绑定的是同一个页面。。。。。。

背景：最近使用vue进行前端开发，难免会遇到需要上传文件和文件下载的，但el-upload直接上传的方式不符合我的要求，就改了一下实现方式。element地址利用el-upload实现文件上传，不需要直接上传，需要携带其他表单参数或者其他情况下，可以使用以下方法<template> <div> <!-- 上传文件 --> <el-upload class="upload-demo" action="https://jsonpla

背景：前几天用qs处理请求参数，没啥问题，后端接收的轻轻松松，今天遇到一个坑，qs直接处理list，后端根本接收不到，会提示请求参数不是list、map、array类型。安装qs npm install qs，如果已经安装了axios的话，就不需要再安装了，直接引入import Qs from 'qs'；qs有两种使用方式//1. qs.parse()将URL解析成对象的形式let url = 'userName=12212&pwd=123&token=120';Qs.pars

背景：新的项目使用了vue，但是ztree的数据格式是之前的，{id，name，pId…}，与vue-Treeselect的格式不一致，为了兼容后端代码，所以前端数据重新生成一次。引入vue-Treeselectnpm install --save @riophae/vue-treeselect官方文档地址：https://www.vue-treeselect.cn/#basic-features在页面上使用tree-select标签<template> <div&

背景：之前搞了一个也消息动态展示模块，但是不滚动啊！！！只是将第二条数据给第一条，第三条数据给第二条，一秒闪一下，从而实现动态展示，但觉得不是很连贯，不怎么好看，就改了一下。先简单介绍一下animation样式属性描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-de

背景：前端接收后端返回的list集合，并将该集合展示在页面。//例如：let _list = [{"name":"小一", "age":10, "id":1},{"name":"小二", "age":15, "id":2},{"name":"小三", "age":9, "id":3}]方案一，直接在HTML代码中使用v-for、Object.key、Object.value来渲染页面<template> <div v-for="map in _list"> <u

背景：默认进行路由缓存，关闭el-tag标签后，清空该标签对应的路由的缓存，下次打开时，也是默认缓存。keep-alive是不支持动态删除缓存，所以我们需要通过一些特殊的方法，来实现动态删除路由缓存，top：即看一下this.$vnode的返回值，那些是我们需要的。以下代码写在src文件的index.js里面，看以下你们import Vue from 'vue’写在哪，就写在哪。//当前路由跳转到下一个路由前，进行拦截Vue.mixin({ beforeRouteLeave(to,form,ne

背景：想弄一个路由跳转时，保留当前页面数据，不然每次跳转回来后，就要重新写一遍，太麻烦了。发现vue的标签，与标签搭配使用，可以达到目的。//在.vue文件中，使用<keep-alive>标签包裹<router-view>标签<keep-alive> <router-view></router-view></keep-alive>//这样就可以将路由跳转页面缓存起来//有时候，我们不一定需要缓存全部页面，只有部分页

前提：今天遇到一个问题，我想要修改数组中的某个值，又不想创建新的数组。使用vue方法：splice()//splice是拼接的意思，splice("数组下标，起始位置","删除位数","拼接字符、整数。。。")三个参数，可灵活选择let list = [1,2,3,4];//indexOf("数组中的值"),返回该值在数组中的索引，既下标//1.修改数组元素list.splice(list.indexOf(2),1,0);//结果：[1,0,3,4],完成数组值修改//2.在自定义位置插

第一步：$ npm install vue-json-viewer --save 进行下载第二步：在配置文件中导入，import JsonViewer from ‘vue-json-viewer’，并使用Vue.use(JsonViewer)第三步：直接使用，jsonData为json串属性说明：属性描述默认值expand-depth展开层数1value数据源json串必填json串copyable复制按钮falsesort排序false

sessionStorage是页面临时缓存存储，关闭当前页面后，就会自动删除，不能从另外一个新的窗口获取当前窗口的sessionStorage缓存。例如a.vue窗口中存在sessionStorage缓存，b.vue想取到a.vue中的sessionStorage缓存。解决方法，将sessionStorage中的缓存存储到localStorage本地缓存中（建议存储数据不要过多，并及时清理）。...

备注：以下使用的vue的本地缓存是sessionStorage，既临时缓存，关闭页面后，会自动清空。场景一：做登陆界面，只有登录成功了，才能跳转界面，进入主页面。//vue 路由import Router from 'vue-router'Vue.use(Router)new Router({ routes: [ {//默认页 path: '/', redirect: '/login' }, {//主页面 path: '/main',

背景：今天遇到一个问题，后端返回的是实体类集合，想添加几个新字段，但这样改动会比较大，影响也比较大，所以就想在前端拿到集合后，循环添加几个值。例如原本数据[{“name”: “小明”,“age”: 17}, {“name”: “小红”,“age”: 17}]，现在想添一个sex性别，变成[{“name”: “小明”, “age”: 17, “sex”, “男”}, {“name”: “小红”, “age”: 17, “sex”, “男”}]。最终发现可以直接使用Vue.set()函数，或在method