小破孩的博客

token 过期刷新流程

vue 项目中使用键盘回车或空格按键触发事件

Element ui 中 el-cascader 级联动态加载数据方法

vue 配合钉钉鉴权及钉钉 API 使用方法

钉钉免登陆流程实现方法

Vue2 中使用Swiper组件

vxe-table 两数据表数据对比，并对差异进行标记

element UI 中 el-tree 属性菜单全选及半全选时给后端传递子父级结构数据

<el-upload action="#" v-model="fileList" accept=".xls, .xlsx" :show-file-list="false" :multiple="false" :on-change="onChange" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary" :loa.

开发流程1.获取免登授权码。 H5微应用免登流程2.获取access_token。 调用gettoken接口获取access_token。3.获取用户userid。 调用user/getuserinfo接口获取用户的userid，通过免登码获取用户userid。4.获取用户详情。 调用user/get接口获取用户详情信息。5.根据手机号做登录。 视自己应用情况而定使用以下命令安装钉钉插件：npm install dingtalk-jsapi --save获取微应用免登授权码

今日接到需求，需要在项目的某个页面中自定义预览PDF文档，于是使用 vue-pdf 插件来实现，方法如下：先安装 vue-pdf 插件npm install --save vue-pdf在页面中引用实现：<template> <div class="scrollBox"> <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"><

Excel表导出功能需要将请求中的 responseType 设置为 blob，也就是说请求只能接收Excel文件，json数据没法处理此时可以根据 Response 的 Content-Type值类判断处理，如果值 为 application/json，则先将返回的数据转换成字符串，然后再转换为 JSON // 导出 downLoad(){ const fileReader = new FileReader() // 第一步创建文件对象

首先在表格上添加ref和设置高度，如下：<el-table :data="tableList" height="300" ref="table"></el-table>循环方法如下：mounted() { // 拿到表格挂载后的真实DOM const table = this.$refs.table // 拿到表格中承载数据的div元素 const divData = table.bodyWrapper // 拿到元素后，对元素进行定时增加距离顶部距离，实现

1、设置div标签绑定图标展示<div class="e-chart"> <div>订单状态概览</div> <div id="chartColumn" style="width: auto; height: 350px"></div></div>2、在data里边设置模拟数据echartsList:[ {deptName: "未排产", efficiency: 1048}, ...

在开发过程中使用Element UI中Select下拉框时可能会遇到绑定对象的情况，总结如下：<el-select v-model="productionClassId" value-key="id" @change="deptChangeVal" style="width:200px" placeholder="请选择"> <el-option v-for="item in optionsDept" :key="item.id" :label

问题：表格展示数据的时候后端返回的是list数组中value的值，没有返回label的值，此时列表中需要根据后端返回的value值来匹配显示对应的label的值需要处理的原数据如下：list:[ {value: "A", label: "数据A"}, {value: "B", label: "数据B"}, {value: "C", label: "数据C"}, {value: "D", label: "数据D"}, {value: "E", label:

在开发中，可能会遇到两个或多个函数异步执行的情况，对于Vue中函数的异步函数执行做了一个小总结，如下：异步执行使用async和await完成created() { this.init()},methods: { async init(){ await this.getClassDeptInfoByDuration(); this.getList(); }, // 函数1 getList(){ return

表单内有部分数据是通过数组循环展示出来的，需要对循环出来的表单进行验证，方式如下：<div class="material-list" v-for="(item,index) in model.materialList" :key="index"> <el-form-item label="类型" :prop="`materialList.${index}.materialType`" :rules="{ required: true, message: '请选择类型',tr

有需求要求选择日期时只能选择今天及明天的日期，其他日期禁止选择，方法如下：<el-date-picker type="date" placeholder="选择日期" v-model="model.date1" :picker-options="pickerOptions" style="width: 230px;"></el-date-picker>data(){ return{ pickerOp

近期做的一个项目用的是vue+element-UI+avue框架，在开发过程中遇到了avue框架中dicUrl请求出错的问题，于是各种Google寻找答案，最终解决方案如下：根据一个大佬的解答，赋值 axios 到window对象就可以了具体实现是 在main.js 中引入 项目中封装好的 axios 工具import axios from '@/utils/request'然后将其直接赋值到window对象上window.axios = axios这里补充一下，window的W不是大写的，...

oninput事件：<el-input v-model="form.peacetime" minLength="1" maxlength="8" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入"></el-input>oninput="value=value.replace(/[^\d.]/g,'')" 此方法验证了输入框只能输入数字并且大于0@blur事件<el-input v-m.

data中定义： //分页 tablePage: { page: 1, size: 10, background: true, totalElements: 0 },删除成功后的位置添加如下方法：// 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页const totalPage = Math.ceil((this.tabl

效果图：HTML代码部分： <el-form :inline="true" :model="deptForm" :rules="deptRules" ref="deptForm"> <el-form-item label="预算类型：" label-width="120px"> <span>{{ budgetTitle }}</span> .

今天在做一个项目的时候页面需要展示两个表格，并且数据量可能会很大，所以将两个表格写成了两个子组件，在父组件中进行引用，重点：两个子组件都是可输入的表单，可以进行编辑 子组件的表格编辑完成后要立即将数据传递到父组件（因为提交按钮是公共的，需要在父组件页面进行提交）子组件上添加实时保存的事件：<vxe-table :align="allAlign" :auto-resize="true" ref="xTable"

插件地址：https://www.lodashjs.com/未处理数据结构：[ { "date": "2018", "modified": 1516884840670, "content": null }, { "date": "2016", "modified": 1516884600059, "conte

// 递归判断列表，把最后的children设为undefinedgetTreeData(data) { for (var i = 0; i < data.length; i++) { if (data[i].node.length < 1) { // children若为空数组，则将children设为undefined data[i].node = undefined; } els.

// 加法const accAdd = (arg1, arg2) => { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { .

效果图：表格代码部分：<vxe-table border show-header-overflow show-overflow show-footer class="mytable-style" ref="xTable" highlight-hover-row :footer-method="footerMethod"

最近公司项目需要做一个统计图标的页面，有些配置在Echarts官网文档找起来太费劲，就通过百度搜索了一些，进行如下总结：1、设置div标签绑定图标展示<div id="chartColumn" style="width: auto; height: 600px"></div>2、在data里边设置模拟数据list:[ {deptName: "部门1", efficiency: 31.42, personInCharge: "主管...

问题：一个table列表，有一个多选的搜索框，参数是以数组的形式传递，结果出现了如下的情况：解决办法：使用qs.stringify()将对象 序列化成URL的形式，以&进行拼接，如下：首先使用：npm install qs 命安装qs然后在需要的地方引入：import qs from 'qs'最后就是使用：export function queryReportForm(data) { return request({ url: 'ap

本文章爬取视频以 “.ts” 文件为例，可从视频网站爬取相关视频碎片，最后拼接成一个完整的视频首先安装Python，安装方法可参考菜鸟教程（https://www.runoob.com/python/python-install.html）1、打开一个视频网站，F12，检查网站代码，找到 NetWork --> XHR ，选择视频碎片的链接，如下：2、开始编写代码进行视频下载import requestsimport ostry: def test(i):

现在项目中安装 http-proxy-middleware 安装方法如下：npm install --save-dev http-proxy-middleware然后在config/index.js中配置http-proxy-middleware本地代理dev: { // Paths assetsSubDirectory: 'static', assetsPu...

POST请求变成OPTIONS及报错信息（跨域）主要解决方案：使用qs.stringify1、安装qsnpm installqs --save2、axios配置和使用在接口请求页面引入安装好的qs，如下图：引入完成之后使用qs改变传递的参数data，如下：这样就可以了，post请求的时候就不会再出现OPTIONS了...

1、在src 目录下创建request 文件夹，然后在里面新建http.js和api.js文件，http.js 用于封装 axios，api.js用来统一管理我们的接口。安装 npm i axios --save在http.js 引入axios import axios from 'axios'设置环境和请求环境 ...

使用jQuery中:contains选择器实现模糊搜索、匹配关键字效果。<div class="warp"> <div class="search_box"> <input type="text" placeholder="请输入搜索内容"> <i class="search_icon">&lt...

先看几个效果图：以上是V-Calendar官网展示出的日历demo效果图（这只是一部分），这么多种类，总有一款适合你下边说一下使用方法：通过npm安装依赖：npm install v-calendar@next安装完成后在main.js中配置使用import VCalendar from 'v-calendar'; // 引入日历插件Vue.use(VCal...

先在methods下写一个filter过滤的方法unique(arr) { // 根据唯一标识orderId来对数组进行过滤 console.log(arr); const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组 过滤条件是，如果res中没有某个键，就...

在实际的项目中，有时候需要判断当前页面是否在微信浏览器中打开方法一：var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;if (isWeixin) { return true;}else{ return false;}方法二：...

报错类型：&gt; music@1.0.0 dev F:\music\music&gt; node build/dev-server.js&gt; Starting dev server...ERROR Failed to compile with 2 errors14:30:11error in ./src/App.vueSyntax Error: Unexpected token {@ ./s...