Vue
我还想在你的温柔里撒野
卿卿qing
这个作者很懒,什么都没留下…
展开
-
【Vue】在 beforeRouteEnter 中不能使用this的解决办法
在 beforeRouteEnter 中不能使用this的解决办法原创 2022-08-30 15:55:51 · 1286 阅读 · 1 评论 -
【Vue】实现动态绑定多个不同的类名
【Vue】实现动态绑定多个不同的类名原创 2022-07-02 16:42:10 · 2138 阅读 · 0 评论 -
【Vue3.0】数据监听(watch)
vue3.0数据监听原创 2022-06-27 14:59:13 · 1269 阅读 · 0 评论 -
【Element UI】el-upload 踩的坑
el-upload 上传文件并显示进度条原创 2022-06-16 17:39:52 · 2733 阅读 · 2 评论 -
【Vue】watch的详细⽤法
vue的watch监听事件,监听初始值,对象原创 2022-06-06 11:53:29 · 981 阅读 · 0 评论 -
【Vue】Vue项目使用keep-alive实现 详情页 返回 列表页 保存之前的查询条件,但其他页面进入列表页不保存查询条件
需求:1、从列表页面(list.vue)进入详情页面(detail.vue)后再返回列表页,需要保留之前的查询条件2、从其他页面(home.vue)进入列表页面(list.vue)不需要保留查询条件使用keep-alive来缓存页面1、配置路由routes.js在路由选项中,配置meta属性,需要缓存的页面设置keepAlive为true即为需要缓存,同时设置isBack属性,用来标识页面是否是从详情页面返回的,默认false{ path: '/list', component:原创 2022-05-24 16:26:53 · 1736 阅读 · 3 评论 -
【ElementUI】el-table表头宽度自适应方法
<el-table-column prop="PPAPTaskNum" :label="st('publicCustom.PPAPTaskNo')" :width="getHeaderWidth('PPAP任务号')" show-overflow-tooltip></el-table-column>// 表头宽度自适应的方法getHeaderWidth(title) { // show-overflow-tooltip return title.lengt原创 2022-04-08 16:06:58 · 2287 阅读 · 1 评论 -
【vuex-persistedstate】页面一直加载中,不请求接口
为了解决刷新页面不丢失数据,引用了依赖包vuex-persistedstate,本地使用没有发现问题。发布到线上,页面重新加载的调度时,localStorage保留了登录时获得的相同信息,并且VueDev工具上的整个Vuex Panel重置,导致页面一直处于加载中,不请求接口正常返回数据。由此得出,这是重新加载页面而不是调用函数。目前只能通过 router 或是浏览器缓存来存储数据,如果你们有更好的方法,可以留言到评论区,或是私信给我。想了解 vuex-persistedstate 是怎么使用的,可原创 2022-03-22 11:45:54 · 1133 阅读 · 0 评论 -
【Vuex】解决 vuex 刷新后数据丢失问题
问题描述vuex 作为内存来存储,一般在登录成功时需要把用户信息,菜单信息等放置 vuex 中,作为全局的共享数据但是我们存放在 vuex 中的数据在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里的数据就会被重新赋值。那么如何解决这个问题呢?这里可以使用一个持久化插件 vuex-persistedstate。解决方法1,安装 vuex-persistedstatenpm ins原创 2022-03-21 18:43:45 · 3434 阅读 · 0 评论 -
【Vue】父子组件,子组件返回父组件页面
父组件<template slot="footer-operation"> <div ref="refUpdateButtons" :is="customComponent.updateButtons" :data="{parent:vm}"> </div></template>data() { return { vm: this, }}子组件<template> <div> <el-b原创 2022-03-14 20:35:55 · 1807 阅读 · 0 评论 -
【npm install】下载依赖报错
npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR! npm ERR! While resolving: ChiTu@1.0.0npm ERR! Found: html-webpack-plugin@4.0.0-alphanpm ERR! node_modules/html-webpack-pluginnpm ERR! dev html-webpack-plugin@"4.0.0-a转载 2022-03-03 10:55:51 · 1674 阅读 · 0 评论 -
【el-dialog】解决同一组件使用俩个el-dialog,内容被遮罩层覆盖的问题
出现问题如下,内容被遮罩层覆盖如果需要在一个 Dialog 内部嵌套另一个 Dialog或者同一组件有多个Dialog时,需要使用 append-to-body属性。原创 2022-02-28 10:51:57 · 6015 阅读 · 0 评论 -
【vue3.0】keep-alive 路由页面缓存
前言在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,是不需要重新加载的。先简单介绍一下什么情况下会用到keep-alive1,当使用路由跳转到其他页面的时候,要求缓存当前页面,比如在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回,如果不加任何处理,列表页面会重新加载,默认显示第一页数据,而不在是之前的第三页,这样如果还需要查看之前查原创 2021-12-28 16:32:49 · 5043 阅读 · 0 评论 -
【vue3.0 + element-plus】el-table-column空数据时展示“--“
<el-table-column prop="name" label="姓名" width="120"> <template v-slot='scope'> <span>{{scope.row.name|| '--'}}</span> </template></el-table-column>原创 2021-12-24 15:41:18 · 2390 阅读 · 1 评论 -
【vue3.0】同一个项目代理俩个服务地址
vue.config.js代码module.exports = { // 基本路径 publicPath: './', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 路径别名 configureWebpack: { devtool: 'source-map', resolve: { alias: { assets: '@/assets', components: '@/c原创 2021-12-22 15:42:24 · 688 阅读 · 0 评论 -
【Vue3.0】报错 Object(...) is not a function,history: createWebHashHistory()
引用hash模式运行项目报错,错误信息如下import { createRouter, createWebHashHistory } from 'vue-router'import routes from './routes'const router = createRouter({ history: createWebHashHistory(), routes})export default router解决方法:升级 vue-router 版本npm install vu原创 2021-12-17 16:03:39 · 1369 阅读 · 0 评论 -
【Vue3.0】报错 Cannot read properties of undefined (reading ‘use‘)
vue3.0 项目引用element-plus,运行项目报错,main.js代码如下import Vue from 'vue'import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'Vue.use(ElementPlus)createApp(App).mount('#app')vue原创 2021-12-17 13:49:36 · 9783 阅读 · 1 评论 -
【Vue3.0】路由参数获取方式
方法一:通过引入 “vue-router” 的 useRouterimport { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { // 打印 console.log('router:', router.currentRoute.value.query) }) return {}}方法原创 2021-11-19 13:50:21 · 3473 阅读 · 0 评论 -
vue3.x 使用$refs未定义,Cannot read property ‘$refs‘ of undefined
1. 场景:el-form 表单校验获取ref未定义2. 解决方法:vue3.x 中setup使用箭头函数,获取this失败,不使用箭头函数2.1 js 代码function sureBizOrg (busAreaRef) { this.$refs[busAreaRef].validate((valid) => { if (valid) { doing() } else { doing() } })}...原创 2021-10-15 15:31:41 · 7898 阅读 · 0 评论 -
elementui 去除 el-form 表单校验提示信息 clearValidate
JS 代码function cancelBizOrg (busAreaRef) { this.$refs[busAreaRef].clearValidate()}原创 2021-10-15 15:25:28 · 1647 阅读 · 0 评论 -
vue3.x 使用nextTick未定义,报错Cannot read property ‘$nextTick‘ of undefined
在vue2.0我们想刷新一个组件的话是可以在data里面定义一个变量,然后methods里面直接this.$nextTick直接调用这个函数来操作的,在vue3.0中的setup他的用法是不一样的在vue3.x中使用方法借鉴2.3原创 2021-10-15 15:11:55 · 5983 阅读 · 0 评论 -
vue3.x 使用 provide,inject 重载页面数据
1. 场景:在增加,修改或者删除一条记录的后希望当前页面可以重新刷新2. 使用 provide,inject,nextTick 实现2.1 App.vue 提供刷新方法<template> <div class="sofa-admin-app"> <router-view v-if='isRouterAlive'/> </div></template><script>import { defineCompo原创 2021-10-15 14:58:27 · 4255 阅读 · 0 评论 -
vue修改elementui表格el-table选中行的高亮色highlight-current-row
css 代码::v-deep .el-table__body tr.current-row>td { color: #fff; background: #409EFF!important;}原创 2021-10-14 17:38:47 · 7004 阅读 · 3 评论 -
vue解决elementui消息弹出框ElMessageBox动态内容换行问题
1. 实现效果2.解决方法: 使用模板字符串 + br 标签换行 + dangerouslyUseHTMLString 属性2.1 JS处理const deleteBusArea = () => { ElMessageBox({ title: '提示', message: `${busArea.deleName}有${busArea.deleSonNumber}个下属区域,删除后其下区域将一并删除<br/>${busArea.deleName}或其下属区域下存在原创 2021-10-14 17:34:52 · 6954 阅读 · 0 评论 -
vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
1. 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据2. 解决办法: 使用递归的方式,将最底层中的 children 设为 undefined2.1 html代码<el-cascader v-model="busAreaForm.codeUp" placeholder="请选择" :options="codeUpList" :props="{ checkStrictly: true }" show-all-levels></el-ca原创 2021-10-14 17:26:34 · 2430 阅读 · 1 评论 -
Element el-table树形数据 tree-props使用注意事项
亲测有效原创 2021-08-28 09:54:34 · 3784 阅读 · 0 评论 -
“Cannot read property ‘length‘ of undefined“报错处理
vue的数据绑定在刚开始只是和内存建立联系,并没有真正的和后台的数据挂上钩,所以一开始的val.data只是一个空值,必须在之前加个if判断,确保有值以后再开始计算lengthif(val.data){ this.length= val.data.length;}...原创 2021-08-28 09:51:19 · 776 阅读 · 0 评论 -
vue-cli3 npm run build报错 ,resolve is not defined
解决:在vue.config.js 文件中 module.exports 上面添加const path = require('path')const webpack = require('webpack')function resolve(dir) { return path.join(__dirname, dir)}原创 2021-08-28 09:49:00 · 8145 阅读 · 0 评论 -
vue3.0 引用 iconfont 图标
亲测有效原创 2021-08-28 09:45:43 · 2334 阅读 · 0 评论 -
van-field 校验手机号码格式
<van-field v-model="info.storeContactsInfo" label="联系手机" placeholder="请完善" :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" :disabled="!canSubmit"/>methods: { verifyPhone (val) { return /^1\d{10}$/.test(val) // 返回true或f原创 2021-08-20 15:05:01 · 2090 阅读 · 1 评论 -
多级嵌套数组对象更改key键-递归比JSON.stringfy操作字符快近20倍
使用场景el-cascader层级数据,将后台字段key更改为label,value,children<el-cascader placeholder="" :options="relationList" :show-all-levels="false" filterable></el-cascader>方法一:递归更改或者新增keyrelationListFn () { api.regionOrganize.districtList().then(r原创 2021-08-11 17:44:45 · 1096 阅读 · 0 评论 -
vue-pdf 通过文件流预览pdf文件
前端预览pdf功能,后端返回文件流的形式1 首先,下载vue-pdfnpm install vue-pdf -D2 其次,模板里面引入vue-pdfimport pdf from ‘vue-pdf’3 html:<pdf :src="src"></pdf>4 相关js:// 初始化获取pdf文件getPdfCode (index) { this.$set(this.loading, index, true) // iview的按钮懒加载 axios({原创 2021-07-19 15:20:07 · 2381 阅读 · 0 评论 -
vue 下载二进制流文件
平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载;另一种是后台直接返回文件的二进制内容,然后前端转化再下载,下面主要说的是第二种实现方式Blob、ajax(axios)mdn 上是这样介绍 Blob 的:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据具体使用axios({ method: 'post', url: '/export',}).then(res =&g原创 2021-08-11 11:32:20 · 3079 阅读 · 1 评论 -
vue 自定义请求头参数
我是写在request.js中做的拦截处理import axios from 'axios'const baseURL = process.env.VUE_APP_BASE_URLconst http = axios.create({ baseURL: baseURL })// 请求拦截器http.interceptors.request.use( config => { // config.headers.umcRequestUserName = 9117436 c原创 2021-08-11 11:02:28 · 1182 阅读 · 0 评论 -
Uncaught (in promise) TypeError: Cannot read property ‘cancelToken‘ of undefined 报错
在页面中发送axios请求时,报Uncaught (in promise) TypeError: Cannot read property ‘cancelToken’ of undefined解决方法,在axios拦截器中return config; // 添加这一行原创 2021-08-11 11:01:20 · 1073 阅读 · 3 评论 -
Chrome浏览器找不见Vue项目源代码
Vue项目在Chrome浏览器的源代码混乱,无法调试问题先上个问题图:在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’如图:搞定!重启下项目,按F12 看看效果去吧之所以会出现这种情况,一般是Vue模板项目 取消设置SourceMap,为了避免前端源码在浏览器端泄露。解决这个问题,就是配置一个 SourceMap就好。关键点来了,不同脚手架版本,配置代码不同!我的脚手架是3.x.x,如果你是其他版本,就找找其他原创 2021-08-04 15:26:27 · 3585 阅读 · 0 评论 -
vue项目怎么使用 chrome 打断点 debug
vue项目怎么使用 chrome 打断点 debug原创 2021-07-19 14:47:24 · 1434 阅读 · 0 评论 -
vscode vue项目代码断点调试
vscode vue项目代码断点调试原创 2021-07-19 14:46:21 · 994 阅读 · 0 评论 -
iview 表单验证下拉框不通过问题
输入框验证<FormItem label="跟单人" prop="followUpPerson"> <Input v-model="addCustomerPar.followUpPerson" :disabled='customerDisabled'></Input></FormItem>addCustomerRules: { followUpPerson: [{ required: true,message: '此项不能为空', trig原创 2021-06-17 17:40:07 · 571 阅读 · 0 评论 -
iview Modal对话框,点击确定阻止Modal隐藏
<Modal class="modal-mask" v-model="dialogMod" :title="title" :mask-closable="false"> <div slot="footer"> <Button @click="dialogMod = false">取消</Button> <Button type="primary" class="btn-warning" @clic.原创 2021-06-17 15:04:24 · 369 阅读 · 0 评论