- 博客(33)
- 收藏
- 关注
RSS订阅原创 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
6891
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
2702
原创 js判断传入值是否为空
js判断传入值是否为空方法1：function isEmpty(val){ return val === '' || val === undefined || val === null}方法2：使用es6的空值运算符空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。function isEmpty(val){ return val??'' === ''}补充：lodash.isNil(val) 可
2021-10-09 10:46:45
911
原创 css禁止文字选中与图片拖拽
禁止文字选中.select-none { -webkit-user-select: none; -ms-user-select: none; user-select: none;}user-select目前的兼容性禁止图片拖拽.drag-none { -webkit-user-drag: none;}user-drag目前的兼容性
2021-09-26 14:48:40
549
原创 前端实现树的模糊查询
前端实现树结构模糊查询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
746
原创 浏览器刷新和关闭时显示提示信息
vue 刷新和关闭浏览器时显示提示信息使用onbeforeunload事件mounted() { window.onbeforeunload = e => { e = e || window.event if (e) { e.returnValue = '关闭提示' } return '关闭提示' } }},beforeDestr
2021-08-16 20:16:03
1106
原创 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
413
原创 css多行文本换行省略号且识别换行符
>>>.textarea { .cell { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: blue; white-space: pre-line; }}
2021-07-30 10:19:16
211
原创 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
663
原创 js校验字符串是不是正则表达式
校验字符串是否为正则表达式checkReg(val) { let regVal = '/' + val + '/' const isReg = (val) => { let isReg try { isReg = eval(val) instanceof RegExp } catch (e) { isReg = false } return isReg
2021-07-27 10:29:09
877
原创 js处理树结构数据常用方法
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
2021-07-27 10:19:55
799
原创 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
885
原创 使用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
1165
原创 @input校验table列重复
@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
2021-05-17 10:28:20
521
1
原创 jQuery实现表格的数据拖拽
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
2021-05-14 11:11:24
473
原创 @blur检验数组重复并对重复项加后缀
@blur校验数组重复使用场景table嵌套inputinput失去焦点时判断输入的所有值是否有重复项，并对重复项增加01，02，03的后缀实现效果JS部分 data(){ return { repeatTime:new Map([]) //记录每一项的重复次数 } } repeatZhName() { // 重复字段的中文名后加_01 for
2021-05-12 16:12:52
267
原创 openlayer打点实现波纹扩散效果
openlayer打点模拟波纹扩散效果方法定义addAnimatePoint(point) { // 定义一个打点图层，必须是矢量层 let that = this let pointAnimationLayer = new VectorLayer({ source: new VectorSource() }) // 可传类型为icon/circle
2021-04-27 11:23:16
879
原创 elementui实现局部loading
el-dialog局部loadingthis.dialogLoadingInstance = this.$loading({ visible: true, text: '拼命加载中', spinner: 'el-icon-loading', target: document.querySelector('.el-dialog.component-manage') }) 发起请求this.$http({ tim
2021-04-27 10:52:59
1913
原创 自定义词云特效结合el-carousel实现轮播图词云
轮播词云需求轮播图+词云每页最多8个词云最多24个词云展示(最多3页)词云渐出+呼吸灯效果效果图html部分<el-carousel arrow="never" indicator-position="outside" :height="carouselHeight" :autoplay="false" @change=
2021-04-21 16:02:16
857
1
原创 echarts实现区域/线条渐变色双折线图
echarts实现渐变色双折线图效果图echarts配置const option = { grid: { left: '6%', // 与容器左侧的距离 right: '6%', // 与容器右侧的距离 // top: '', // 与容器顶部的距离 bottom: '10%' // 与容器底部的距离
2021-04-21 15:16:50
756
原创 echarts自定义饼图legend实现超长文本省略+value显示
echarts自定义legend样式需求：legend排放位置自定义单独legend设置不同的背景色legend超长文本省略+后面显示对应的value值效果图实现方案：echarts中let options={ // 因为要对不同的legend设置不同的定位，所以legend使用数组，不适用对象 //legend:[] legend:this.customPieLegend(this.modelUseCount)}jscustomPieLegend(arr) {
2021-04-21 14:07:11
1695
原创 css实现渐变色遮罩层(模糊毛边)
CSS实现模糊毛边效果效果如图css样式代码.el-table>td { border none}.el-table::before { height 40px background linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1)) pointer-events none}核心思路取消table边框使用伪元素模拟边框linear-gradient实现渐变色poi
2021-04-20 20:19:00
2943
原创 echarts双折线图自定义tooltips样式
自定义双折线图样式x轴标签为19，自定义样式更改为年月日tooltip: { trigger: 'axis', formatter: params => { let resultData = params[0] let outputData = params[1] let r
2021-04-20 20:14:52
877
原创 echarts饼图自定义tooltips实现超长文本省略
let option = { tooltip: { trigger: 'item', formatter: params => { // 自定义tooltips样式，模型名过长省略 let modelName = params.name let mo
2021-04-20 20:10:20
751
原创 超长文字省略出现自适应失效
flex与white-space:nowrap混合使用，超长文本会使得容器自适应失效解决方案<div class='out'> <p class='inner'><p></div>css代码.modelname { flex 1 // width 60% width 0 p { width 100% line-height 36px
2021-04-20 20:07:06
144
原创 js判断对象数组中是否包含重复项
js判断对象数组中是否包含重复项isRepeat(arr) { const hash = {} for (let i = 0; i < arr.length; i++) { if (hash[arr[i].componentKey]) { // 名字重复了 return true } hash[arr[i].componentKey] = true } // 名字没重复 return
2021-04-20 20:00:41
684
原创 el-table翻页滚动条自动回弹
el-table翻页滚动条自动回弹// 翻页滚动条自动回弹this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0})
2021-04-20 19:58:17
609
原创 el-table触底监听事件
table触底监听，添加/删除样式// table触底监听export const bottomOutWatch = tabledom => { tabledom.addEventListener('scroll', () => { // 滚动距离 let scrollTop = tabledom.scrollTop // table的可视区域高度 let windowHeight = tabledom.clientHe
2021-04-20 19:55:36
937
原创 el-table实现高度自适应
el-table实现高度自适应实现代码data中定义data(){ return { tableHeight: window.innerHeight - 120, // tableHeight为el-table绑定的height screenHeight: window.innerHeight, }}mounted中监听window.onresizewindow.onresize = () => { return (() =
2021-04-20 19:53:24
409
原创 如何动态更新el-table中的数据
$set动态更新el-table中的数据解决方案this.$set(target, key, value)target: 要更改的数据源(可以是一个对象或者数组)key: 要更改的具体数据(索引)value: 新增的值<el-button type="text" @click="downloadResult(scope.row, scope.$index)"></el-button>接受数据的方法downloadResult(data,index){ data.
2021-04-20 19:48:28
3493
原创 @input在添加参数的情况下如何获取当前value
@input在添加参数的情况下如何获取当前value解决方案，使用#event<el-table-column prop="columnComment" label="元件字段名"> <template slot-scope="scope"> <el-input v-model="scope.row.columnComment" maxlength="32" @i
2021-04-20 19:37:31
723
原创 el-form嵌套el-table如何校验
el-form嵌套el-table如何校验el-form中嵌套el-table，如何对table的字段进行el-form的校验<el-table :data="currentComponent.keysList" @select="handleTableSelect" @select-all="handleTableSelect"> <el-table-column prop="componentKey" label="元件字段名">
2021-04-20 19:32:01
657
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人