qq_37635012的博客

在config.js里，配置了一个zswjName变量，在我们部署时修改其名称就能达到页面上下载下来的文件的文件名为我们想要的文件名了。

这个时候我们打印window.g就是undefined。因为vue的编译是以webpack为基础的 而index.html的引用在webpack编译之前 无法使用相对路径 而BASE_URL为内置全局变量 可以指向到项目真正的根目录下。这是因为<%= BASE URL %>代表 public文件夹下，<%= BASE_URL %>data/表示public/data 文件夹下。

【代码】Vue axios请求报错后重复提示，处理只提醒一次。

【代码】vue iview table实现全选。

【代码】Vue input密码输入框自定义密码眼睛icon。

现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法，具体看。

【代码】JS实现双向数据绑定的三种方式。

这里的window.g.BackUrl是我们在B项目的public下的config.js里对跳回地址进行设置的值，也就是在B项目代码config.js里写上A项目的访问地址，方便调用，然后这里homePage也是A项目的首页路由地址，这样就实现了从B项目跳回A项目。最近遇到一个需求，就是有两个不同的项目，姑且叫项目A与项目B吧，前端技术栈都是Vue,现在登录成功A项目后希望点击A项目里某个按钮可以跳转到B项目里的某个页面，然后点击B项目里某个按钮可以跳回到A项目里的某个页面。

最近遇到一个需求，表格列表默认不展示某一列，当我设置后可以展示该列，也可以展示和隐藏别的列，起到可以对整个表格列展示隐藏控制的效果，如下示例，默认不展示“单位名称”这一列，在我点击设置齿轮后可以看到，有“单位名称”这一列，但未打钩：当我勾中“单位名称”，去掉“地址”的勾中后，列表可以看到“单位名称”这一列，看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是：列表展示列我们用到了tableHead,然后我们定义了一个数组showLis

由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢。需要注意的是，以上方法适用于开发环境下解决跨域问题。

于是我们的仓库就有了README.m和.gitignore文件，然后我们把本地项目关联到这个仓库，并把项目推送到仓库时，我们在关联本地与远程时，两端都是有内容的，但是这两份内容并没有联系，当我们推送到远程或者从远程拉取内容时，都会有没有被跟踪的内容，于是你看git报的详细错误中总是会让你先拉取再推送，但是拉取总是失败。我们在创建仓库的时候，都会勾选“使用Reamdme文件初始化这个仓库”这个操作初识了一个README文件并配置添加了忽略文件。最近在把代码推送到远端仓库时遇到一个问题，推送不上去，报错。

需要注意的是，这个iview级联选择器不能像饿了么ui那样配置props自定义项，所以需要我们设置好label与value. 然后loadData里写我们懒加载方法，如下所示，通过getCityDeptRegionBrigade方法发请求获取下一级的数据，这里 item.loading = true;然后通过forEach处理成我们想要的数据格式，我们PC项目用到的前端技术栈是vue+iview,最近有个需求，要做个级联选择器，并且是懒加载动态加载后端返回的数据。

【代码】js数据处理：根据字符串id数组，递归找到另一个对象数组里对应id项所对应的label。

功能场景：现在有个上传下载文件的功能，不需要调后端接口，因为需求是不需要将文件存到数据库里。

修改样式：不能加 scope 也可以放在全局样式上，要修改的样式前面要加上自定义的样式名。

然后，这里我们调getCityDeptRegionBrigade这个方法获取级联数据后，我对数据也进行了处理，多加了个label和value.由于上面进行了props配置,这里不加label和value也行，但这个leaf是必须要加的，因为我们的级联最多只有三级，加了这个leaf: node.level >= 2后就解决了第三级出现箭头和需要双击第三级才选中第三级选项的bug。

这里有几个细节要注意的是，这个饼图里文件资源与数据库资源的间距是由series里的minAngle及itemStyle里的borderWidth决定间距大小。渐变色面积是由series里的areaStyle来控制，这行代码color: new this.$echarts.graphic.LinearGradient里是加了new之后渐变色才生效，因为有时候不加这个new它也生效，如果你设置的渐变色没生效就加个new试试。

【代码】vue保留用户在列表的操作记录， beforeRouteLeave离开当前组件缓存数据即可。

【代码】el-table同时固定左列和右列时，出现错误情况。

有的时候，我们需要在多个组件里调用一个公共方法，这样我们就能将这个方法封装成全局的公共方法。

【代码】解决elementUI固定列后，下方多了一条横线的问题。

【代码】vue2父组件向子组件传值时，子组件同时接收多个数据类型，控制台报警的问题。

然后将默认的content: “\E6DF”;替换成content: “\e790”;就好了，在vscode里搜索替换即可。找到饿了么Icon里我们想要向下箭头，F12后复制content内容content: “\e790”;

如下图，我们现在全勾中的有表格管理及其下的子级，而半勾中的有工作台和任务管理及其子级。与源数据id一模一样，达到目的。

今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值，最开始我是用的v-if与v-else就会导致页面一闪一闪的，这是因为销毁dom元素后导致的闪屏，于是换成v-show来解决了这个闪屏问题。

比如我们对刚才添加的代码不满意，想通过Git命令回退到之前的版本。为了保证代码的同步，我们需要将远程代码拉到本地，git有2个命令可以将远程仓库的内容拉到本地，一个是git pull，可以将远程仓库的代码拉到本地仓库，同时合并到本地工作空间；如下图是整个合并分支的过程，红线上面的是branch0分支的test.md文件的内容，绿线上面是master分支中test.md文件的内容，前者比后者多3行内容（含1行空行），执行合并命令后再看master分支中test.md的内容已经与branch0中的一致了。

为了实现上面的效果，初始数据originList，页面上展示的数据myOriginList，选中的数据selectArr，是否全选中checkAll，实现思路是点击搜索按钮后，触发search方法，先判断输入框是否有搜索词，区别处理，如果有搜索词的话，先拷贝一份源数据originList，也就是先拷贝一份初始数据，然后通过数组的filter+includes方法实现过滤，将过滤后得到的数组回显到页面myOriginList上，然后取消全选checkAll设为false。

{ checked: true, name: “苹果” }] ，现在想实现的目的是，只要有arr1里的项与arr2项里的name一致的话就将其checked设为true，否则设为false,最终得到的数组是arr3，其结果应是[{checked:true,name:‘苹果’},{checked:false,name:‘香蕉’},{checked:false,name:‘梨子’}]项目需求有个数据需要处理，现有两个数组arr1和arr2,其中 arr1为[“香蕉”, “苹果”, “梨子”]，arr2为。

最近项目遇到一个bug,在弹窗里el-cascader下拉框脱离文档流，如下图，所属辖区。然后子组件弹窗里写隐藏和展示方法。

最后在watch里监听指派类型切换的时候，将selectIndex改变，这样就改变了key。我们给el-cascader了一个类名disableFirstAndSecondLevel，然后style里写隐藏二级勾选框的样式，注意的是，如果这里有scoped可能会导致样式不生效，需要去掉scoped。：在cascader、select中选择了一条数据，再更换类型，没有这条数据了就会报错，watch监听重新渲染标注一下key就好了。包含级联cascader的options、select的option。

最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端需要在用户点击保存的时候，前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来，如下图，用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等，当用户选中“武汉大学”后会将接口返回的信息回显

然后在mounted生命周期里，先通过getElementsByClassName获取三个dom,如下代码里usernameArr打印出来usernameArr不是个正常的数组，而是HTMLCollection这个类数组对象，通过Array.from将其转为真正的数组，然后就可以遍历了。最近项目遇到一个问题，就是登录页面里，用户可以拖拽img的值到输入框里。为了禁止用户往输入框里拖拽东西，我们先给三个输入框一个相同的类名myInput。

为了我们方便直接使用rem作为单位，我们需要安装一个插件到vscode编辑器上,这个插件叫cssrem。因为UI给我们的设计稿尺寸单位用的是px，这个插件可以在我们写代码输入多少px后帮我们直接算出px转成rem的话rem值是多少，我们直接点击选中即可，如下图。在App.vue里引入rem.js。

然后在我们的组件里使用，先import { nowSize } from “…/utils/nowSize.js”;引入，然后调用方法nowSize(fontSize)传参即可。如下所示，引入后调用方法传入字体大小。我们在做自适应Echarts的时候，字体大小在配置项里是如下配置的， title 标题组件，包含主标题和副标题。

当使用JSON.parse解析json时报错Bad control character in string literal in JSON，因为我们这个是自己的数据库，输入的数据不该出现\r\n，所以直接对数据库数据进行修改。方法一.前端解析前处理掉\r，\n，\t 等转义字符。这句把\r，\n，\t 都替换为空。方法二：数据库中更改数据。

有个需求就是登录时，前端需要将用户输入的密码进行加密后作为参数传递给后端，后端进行解密。1.前端方面：Vue先安装crypto-jsnpm install crypto-js如果失败了就用cnpm安装吧cnpm install crypto-js前端在src文件夹下的utils文件夹下新建一个Secret.js文件，其代码如下：import CryptoJS from 'crypto-js'// 默认的 KEY 与 iv 如果没有给const KEY = CryptoJS.enc.U

我们在data里定义了一个数组selectArr，用于存储我们当前所有页面已经选中打钩的数据。getTableData_new获取当前页table数据，需注意的是在我们调获取当前页table数据的接口成功后，我们需要先将当前页所有数据的_checked设为false,即默认未勾选中，然后遍历我们已经勾选中的selectArr，如果找到了就设为勾选中。这也就是实现了“记忆”功能。现在有个需求就是，在我们选择不同页码的数据勾选中之后，实现跨页勾选记忆功能，就是说已经打钩了的数据，不管切到哪一页它都是打钩状态。

【代码】js调整table表格上下相邻元素顺序。

Set数据结构ES6引入了一种新的数据结构Set，它类似于数组,只不过其成员值都是唯一的,没有重复的值，利用这个特点可以进行数组去重。Set本身是一个构造函数,用来生成Set数据结构。let arr = [1,2,3,1,2,2,1,2,1,1];let set = new Set(arr); console.log(set.size) // 3console.log( [...set] ) // [1,2,3] 元素是唯一的 可以用来数组去重Set结构有以下几个方法:add(value

Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。next(false): 中断当前的导航。