skyblue_afan的博客

表格输入框校验

vue3.0父子组件方法相互调用

vue3.0组件传值，父子组件传值

vue3.0路由传参

1、解决办法：先找到要修改的配置文件，先在src文件下，locale文件中找index.js。如果src下没有locale文件可以找lang文件下的index.js文件。都找不到，可以在Vs Code工具中搜索，VueI18n实例，看哪个文件有在创建VueI18n这个实例，进去看看添加如下图红色字体标注的代码代码：silentTranslationWarn:true，就可以了。2、所遇到的情况：...

<el-input v-model="groupName" size="small" placeholder="请输入@keyup.enter.native="handleSearchList" /><el-button type="primary" style="margin-left:25px" size="small" @click="handleSearchList">搜 索</el-button>

解决办法:1、如果是vue项目，后台管理系统，使用vue-element-admin，一般都用了mockjs。不能删除mockjs。可以修改node_modules文件。如下步骤找到node_modules/mockjs/dist/mock.js 8308行找到node_modules/mockjs/src/xhr/xhr.js 216行代码：MockXMLHttpRequest.prototype.upload=xhr.upload;2、如果不是后台管理系统，或者没有使...

1、首先要安装less，使用命令行进行安装npm install --save less less-loader //使用npm安装如果觉得慢，可以安装淘宝镜像，使用cnpm安装npm install --save less less-loader //使用cnpm安装2、安装完成后，可以使用lessc -v查看版本号，显示版本则安装成功，如果报不是内部命令。可以在package.json中查看，是否安装成功3、在main.js文件中引入less4、使用less...

一般是手动上传会报这种错误。在点击上传后，一般执行清空已上传的文件列表，this.$refs.upload.clearFiles()。不要把清空的操作放到点击上传中，应该放到上传请求中，应该是上传成功后，清空文件列表。不应该是点击上传就清空文件列表，这样文件大点时，还没有上传成功，就清空，就会报上述错误。//下面就是一个手动上传的案例 // 执行上传操作 uploadApk(fileObj) { let data = new FormData(); data.a

<div class="app-container"> <el-table :data="tableData" style="width: 100%" border> <el-table-column prop="date" label="日期" align="center"> </el-table-column> <el-table-column label="姓名" align="center">.

<template> <div class="app-container"> <!-- key最好不要绑定index --> <div v-for="(item,index) in tableData" :key="item.id" style="display:flex;"> <!-- small的样式是当tableData数据中fontSize字段为14px时生效 big的样式是22px --> .

1、先给表格全选定一个宽度 <el-table-column width="70px" type="selection" header-align="center" align="center" :resizable="false"> </el-table-column>2、设置样式/*表格表头全选*//*要添加deep，不然没效果*/ /deep/ .el-table__header .el-table-column--selection

vue，md5加密。vue页面使用和js文件中使用

<div class="app-container"> <!-- key最好不要绑定index --> <div v-for="item in tableData" :key="item.name" style="display:flex;jus"> <div :style="{color:item.color}">{{item.name}}</div> <div :style="{backgroun.

1、给table表头添加:header-cell-style属性<el-table :data="tableData" border :header-cell-style="headClass"></el-table>2、method中修改背景色 // 设置表头颜色 headClass() { return 'background:#F8F8F9' }3、效果如下...

1、vue路由报的警告，原因是路由重复了。如下图：2、解决办法：找到src文件下router下的index.js文件。修改name,将相同的name改一下名称3、保存刷新页面，看控制台已经无报错了

<el-dialog title="replace" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <template slot='title'> <span style="font-size:14px;font-weight:700">原始资源库</span> </template></el-dialog>1、element

vue3.0 + jsbarcode循环生成多个条形码

vue3.0生成条形码。barcode

vue随机生成验证码

1、初始化查询的数据 //查询数据 getSelectDataList(){ //假设这是接口请求到的数据 let resData = [ { name:"test001", age:18 }, { name:"test002", age:19 }, { name:"test003", age:20 }, ] //将数据保存到本地存储中 localStorage.setItem('array', J

下拉框、日期选择器、消息提示框动画

vue中animate.css使用

vue-router页面路由跳转动画

1、折线图折线图数据显示效果解决办法，把yAxis中的type改为log修改后效果2、柱状图数据格式效果图把yAxis中type改为log效果图3、饼状图数据格式效果图解决办法，修改series，中添加minAngle为10.效果图...

1、安装jwt-decode插件npm install jwt-decode --save //慢的话可以cnpmcnpm install jwt-decode --save2、在页面引入安装的插件这里我是在vuex中引入的，因为我在登录拿到token后，我就需要解析token,然后将信息保存起来import jwt_decode from "jwt-decode";3、使用// 解析获取token//data.normal_login_token为请求到的tokenconst de

1、修复F5强制刷新页面，动态路由数据丢失问题。这个在刚才导航守卫那个页面，因为我已经解决好了，所以就直接放上去了。为啥刷新页面，动态路由数据会丢失，因为存储在vuex中，所以就要判断一下，如果当前路径不为首页，就去判断，动态路由的数据是否为0，如果为0就重新获取动态路由的数据。2、修复点击进入动态路由页，再次退出登录，点击登录时，页面不跳转模块页问题。判断当前路由如果是动态路由，并且模块名称，登录后就跳转到模块页。这样就解决了。3、修改完后，通过网络路径，进入后台也不会进去，因为还没有点击模块

1、退出登录，点击个人中心，进入模块页，清除token,vuex中的数据找到退出登录的处理函数，在src/store/user.js中的logout函数，就为退出登录代码如下： //退出登录 logout({ commit, state, dispatch }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { //设置token为空

1、修改路由导航守卫页面，判断何时获取路由数据，并处理获取数据的js。通过网址想直接进入后台进行权限管理。路由守卫的权限在scr/permission.js文件中2、修改导航守卫页面import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogres

1、新建模块页面，添加模块页的路由，完成模块页的页面和对应的点击事件。vue+element+admin后台项目的克隆和运行，我就不说了，下面是对运行起来的项目进行修改。<1>首先在src/views下新建一个cache文件，里面建一个index.vue文件。这里，文件夹和文件名字自己想改成啥都行。<2>添加cache/index.vue的路由，这个页面就是模块页<3>路由添加好后，完成index.vue页面。说明：data中的数据，title是模块名称，id

1、首先在src下新建文件夹vender，将Export2Excel.js和Export2Zip.js文件放到vender文件夹下。这两个js文件可以在我的博客资源中免费下载。0积分下载2、定义一个点击事件<el-button size="mini" class="btn-add" @click="handleDownload1()">导出Zip</el-button>3、data中初始化一些数据downloadLoading: false,filename: '压缩文

1、首先在src下新建文件夹vender，将Export2Excel.js和Export2Zip.js文件放到vender文件夹下。这两个js文件可以在我的博客资源中免费下载。0积分下载2、定义一个点击事件<el-button size="mini" class="btn-add" @click="handleDownload()">导出Excel</el-button>3、data中初始化一些数据filename: "单点订单信息",//这个是导出后execl文件的名称

--------- 使用情况：因为单选的按钮为圆角，样式有些情况不适用，像要多选的样式，单选的功能。要不就是修改样式，要不就是js。-----------1、HTML部分 <div class="resource_box"> <div class="box" v-for="(item,index) in pathurlArray" :key="item.arId"> <input type="checkbox" :checked="checkout.resou

1、后天返回的数据格式满足的条件2、后台返回所有数据3、数据格式处理1>将parentId为0的数据找push进数组到并传递给data2treeDG函数 // 将parentId为0的数据找到并传递给data2treeDG函数 getListData(DemoNode) { // DemoNode为后台取到的所有数据 let dataArray = []; DemoNode.forEach(function (data) { l

1、处理input输入框输入或复制带有空格的字符。//先给输入框绑定一个@input事件<el-input v-model="ruleForm.label" placeholder="请输入显示名称" @input="handelBlank1"></el-input> // 使用正则替换到带有空格的字符 handelBlank1() { this.ruleForm.label = this.ruleForm.label.replace(/\s+/g, "

1、校验是否为urlconst validateUrl = (rule, value, callback) => { // 校验url var reg1 = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;

1、router路由编程式传参，一般两种方式。一种是query传参，另外一种则是params传参。由于params传参刷新页面，会导致数据丢失。所以采用query传参方式比较多，但当使用query传递对象，数组时，刷新页面会报[object Object]，数据无法使用。2、所遇问题：首先打印下要传递的对象数据这是要传递的参数，先正常传参在详情页接受参数控制台打印的数据，第一次可以接收到f5刷新页面，控制台打印单条数据可以无影响，对象无法获取，变为[object Object]。

1、问题如下图所示2、解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数 selected: {}, // 决定图表中显示的个数处理后台取到的数据// 假设这是后台取到的数据 let optionData = [ { value: 1048, name: "搜索引擎" }, { value: 735, name: "直接访问" }, { value: 580, name: "邮件营销

1、如下图，由于数据过多，纵坐标的名称有的没有显示。2、给option中加上dataZoom(滚动条)基本配置项 // 底部Zoom dataZoom: [ { type: "slider", //滑动条 show: true, //开启 yAxisIndex: [0], left: "96%", //滑动条位置 start: 0, //初始化时，

1、如下图，由于数据过多，横坐标的名称有的没有显示。2、解决办法，给option中加上dataZoom(滚动条)基本配置项 // 底部Zoom dataZoom: [ { show: true, realtime: true, height: 24, //这里可以设置dataZoom的尺寸 bottom: 8, //滚动体距离底部的距离 star