weixin_44328764的博客

vite不支持require.context的方引入文件，需要使用import.meta.glob

el-table toggleRowSelection被动触发select/selection-change事件的解决方案场景：接口返回的数据需要列表默认选中，需要调用toggleRowSelection方法，但由于非当前页数据不在数据项内，toggleRowSelection默认触发select事件导致多选数组非当前页数据被干掉解决方案：加锁rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChangehandleSel

1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 }2. 数据列错位问题pageSize改变可能会导致数据列与固定列发生错位现象解决方法，在请求数据返回后调用列表的doLayout方法 this.$nex

js判断传入值是否为空方法1：function isEmpty(val){ return val === '' || val === undefined || val === null}方法2：使用es6的空值运算符空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。function isEmpty(val){ return val??'' === ''}补充：lodash.isNil(val) 可

禁止文字选中.select-none { -webkit-user-select: none; -ms-user-select: none; user-select: none;}user-select目前的兼容性禁止图片拖拽.drag-none { -webkit-user-drag: none;}user-drag目前的兼容性

前端实现树结构模糊查询fliterTree(searchObj, list) { const searchData = (searchObj, arr) => { if (!Array.isArray(arr) || arr.length === 0) { return [] } let newarr = [] arr.forEach(item => { // 自定义查询条件，模糊查询

vue 刷新和关闭浏览器时显示提示信息使用onbeforeunload事件mounted() { window.onbeforeunload = e => { e = e || window.event if (e) { e.returnValue = '关闭提示' } return '关闭提示' } }},beforeDestr

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 /> </

>>>.textarea { .cell { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: blue; white-space: pre-line; }}

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

校验字符串是否为正则表达式checkReg(val) { let regVal = '/' + val + '/' const isReg = (val) => { let isReg try { isReg = eval(val) instanceof RegExp } catch (e) { isReg = false } return isReg

js处理树结构数据常用方法1. 递归树结构获得全部数据2. 判断树结构同级目录下有无重复数据judgeSameLabel(list) { let flag = false // 设立单独的标识用于中断递归函数 const recursion = list => { if (flag) return false for (let i = 0; i < list.length; i++) { for (let j

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"> <

使用vuex缓存接口数据import { getMethod } from '@/lib/request'import apiKeyMap from '../config/apiKeyMap'const state = { dataTypeList: null, cacheStates: {} // dataTypeList:'缓存时间'}const getDataTypeList = () => { return getMethod(apiKeyMap.dataS

@input输入内容时同时校验el-table列数据是否重复// @input='colEqualCheck($event,scope.$index,scope.row)'colEqualCheck(e, index, value) { // 检查列重复 this.$set(this.dataList, index, value) this.checkRepeatCol(this.dataList) },check

jQuery实现将一个ant-table的数据拖拽复制到另一个ant-table需求ant-design-vue将一个嵌套在drawer中的table数据拖拽复制到drawer外面的table中效果拖拽中拖拽后HTML<el-button type="text" size="small" class="text-btn" @click="choseField">选择字段</el-button>// 拖拽到table<a-table class="dr

@blur校验数组重复使用场景table嵌套inputinput失去焦点时判断输入的所有值是否有重复项，并对重复项增加01，02，03的后缀实现效果JS部分 data(){ return { repeatTime:new Map([]) //记录每一项的重复次数 } } repeatZhName() { // 重复字段的中文名后加_01 for

openlayer打点模拟波纹扩散效果方法定义addAnimatePoint(point) { // 定义一个打点图层，必须是矢量层 let that = this let pointAnimationLayer = new VectorLayer({ source: new VectorSource() }) // 可传类型为icon/circle

el-dialog局部loadingthis.dialogLoadingInstance = this.$loading({ visible: true, text: '拼命加载中', spinner: 'el-icon-loading', target: document.querySelector('.el-dialog.component-manage') }) 发起请求this.$http({ tim

轮播词云需求轮播图+词云每页最多8个词云最多24个词云展示(最多3页)词云渐出+呼吸灯效果效果图html部分<el-carousel arrow="never" indicator-position="outside" :height="carouselHeight" :autoplay="false" @change=