vue
喝咖啡还是泡茶
这个作者很懒,什么都没留下…
展开
-
vue3 vite批量注册组件
vite不支持require.context的方引入文件,需要使用import.meta.glob原创 2022-07-12 10:42:31 · 578 阅读 · 1 评论 -
el-table toggleRowSelection被动触发select/selection-change事件的解决方案
el-table toggleRowSelection被动触发select/selection-change事件的解决方案场景:接口返回的数据需要列表默认选中,需要调用toggleRowSelection方法,但由于非当前页数据不在数据项内,toggleRowSelection默认触发select事件导致多选数组非当前页数据被干掉解决方案:加锁rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChangehandleSel原创 2021-11-16 10:50:51 · 7043 阅读 · 4 评论 -
el-table-fixed滚动条被遮挡与数据列错位解决方案
1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 }2. 数据列错位问题pageSize改变可能会导致数据列与固定列发生错位现象解决方法,在请求数据返回后调用列表的doLayout方法 this.$nex原创 2021-10-20 11:15:58 · 2793 阅读 · 0 评论 -
前端实现树的模糊查询
前端实现树结构模糊查询fliterTree(searchObj, list) { const searchData = (searchObj, arr) => { if (!Array.isArray(arr) || arr.length === 0) { return [] } let newarr = [] arr.forEach(item => { // 自定义查询条件,模糊查询原创 2021-09-18 13:51:07 · 762 阅读 · 0 评论 -
浏览器刷新和关闭时显示提示信息
vue 刷新和关闭浏览器时显示提示信息使用onbeforeunload事件mounted() { window.onbeforeunload = e => { e = e || window.event if (e) { e.returnValue = '关闭提示' } return '关闭提示' } }},beforeDestr原创 2021-08-16 20:16:03 · 1121 阅读 · 0 评论 -
vue-router keep-alive缓存策略
vue-route keep-alive缓存策略App.vue中配置keep-alive,通过vuex中的缓存路由数组动态判断是否需要缓存当前组件<template> <div id="app" class="g-root"> <keep-alive :include="$store.state.common.cachedRouteNames"> <router-view /> </原创 2021-08-16 17:05:48 · 431 阅读 · 0 评论 -
el-table默认勾选
el-table默认勾选selected默认为true方法1: setTimeout(() => { this.list.forEach((item, index) => { if (this.hasSelectedList.indexOf(item.id) !== -1) { this.$refs.table.toggleRowSelection(this.list[index]) } })}, 0)方法2: setTimeou原创 2021-07-27 10:41:14 · 695 阅读 · 0 评论 -
input输入框的disabled和type=‘password‘冲突解决方法
readonly/disabled和show-password冲突的解决方案应用场景密码框只读/禁用需要显示show-password按钮解决方案聚焦的同时失焦,实现reanonly效果,同时给input手写一个readonly的样式<el-input class="password-input" type="password" onfocus="this.blur()" show-password v-model="basicInfo.systemPassword"> <原创 2021-05-21 16:51:53 · 906 阅读 · 0 评论 -
使用vuex缓存接口请求的数据
使用vuex缓存接口数据import { getMethod } from '@/lib/request'import apiKeyMap from '../config/apiKeyMap'const state = { dataTypeList: null, cacheStates: {} // dataTypeList:'缓存时间'}const getDataTypeList = () => { return getMethod(apiKeyMap.dataS原创 2021-05-21 10:10:24 · 1181 阅读 · 0 评论