疑问 搜索 动手 解决 记录

原创 Vue+Element 仿飞书表格||甘特图表格 ,搜索、筛选、字段管理、卡片管理功能

注明：此表格是表头自定义多类型筛选的升级版

原创 Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用

一、效果图目前10种筛选类型看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上二、前言实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，

原创 ❤️Hello Programmer❤️

三人行，必有我师也。择其善者而从之，其不善者而改之。立身以立学为先，立学以读书为本。----欧阳修非学无以广才，非志无以成学。人生在勤，不索何获。外韧之味，久则可厌;读书之味，愈久愈深。敏而好学，不耻下问。盛年不重来，一日难再晨。及时当勉励，岁月不待人。...

原创 判断文本元素是否出现省略号，根据文本长度来控制是否显示鼠标悬浮提示el-tooltip

实现：监听窗口宽度，宽度改变，获取标签元素，判断可视窗口宽度与元素宽度大小，改变渲染与否。需求：循环出来的数据，根据文本长度来控制是否显示鼠标悬浮提示el-tooltip。

原创 Vue 动态设置css伪元素content的值，解决不渲染和渲染为数字的问题

直接的赋值为数字的话或者在computed()计算属性中去做toString()依然是不会显示的，如果你在打开控制台时看到 --fraudScoreNum 的值仍然是数字 54，而不是字符串 ‘54’，那可能是因为浏览器对于 CSS 自定义属性的处理方式导致的。如果你想要确保 --fraudScoreNum 的值作为字符串类型传递给 content 属性，你可以在 Vue 模板中使用引号将其括起来。所以无论你是将 --fraudScoreNum 设置为 ‘54’ 还是 54，它们都可以被解析为数值 54。

原创 Vue实现Excel表格中按钮增加小数位数,减少小数位数功能,多用于处理金融数据

【代码】Vue实现Excel表格中按钮增加小数位数,减少小数位数功能,多用于处理金融数据。

原创 Vue 仿Transfer 穿梭框功能实现人员选择,左侧备选列表,右侧已选列表,带搜索带备注项

Vue 仿Transfer 穿梭框功能实现人员选择,左侧备选列表,右侧已选列表,带搜索带备注项

原创 数组里对象根据某个值(包含姓名、字母、数字)排序

数组里对象根据某个值(包含姓名、字母、数字)排序。

原创 Vue el-table 表格第一列序号与复选框hover切换

前言项目中用vue element el-table , 表格的第一列为鼠标经过时切换显示序号与复选框 , 不影响当前行的点击事件 , 如跳转详情等操作老规矩,先上效果图HTML<el-table ref="table" :data="tableData" style="width: 100%" border stripe @cell-mouse-enter="cellEnter" @cell-mouse-

原创 vue+elementUI el-drawer实现在父组件区域内打开抽屉组件

父组件最外层样式{ position: relative; overflow: hidden;}drawer组件样式<el-drawer style="position: absolute" z-index="-1" > // do some</el-drawer>

原创 Vue Element的el-Cascader 五级省市区联动 lazy开启动态加载，数据回显问题

效果图子组件<template> <el-cascader v-if="isShowInfo" :props="props" v-model="selectedValue" placeholder="请选择省市区" @change="handleChange" ></el-cascader></template><script>import { getRegion } from '@/ap

原创 vue element css 下载动画上下滚动循环

效果图图标名字自行替换<div class="ri-animation-border"> <i class="download-2-line" /> </div>代码.ri-animation-border { width: 16px; height: 18px; overflow: hidden; position: relative;}.animation-icon { position: absolute; ani

原创 vue element ui el-popover 样式修改不生效解决方法

在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用::v-deep‘>>>’/deep/行内Style这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染popper-class="down-popover"

原创 Vue element tabs 点击锚点定位 , 鼠标滚动定位

一、效果图二、代码html<el-tabs class="customer-tab" type="card" @tab-click="jump" v-model="tabName" > <el-tab-pane v-for="(tab, index) in tabs" :name="tab.refName" :key="index" :label=

原创 Vue2.0 v-for 中 :key 到底有什么用？

父组件动态传值给子组件 子组件并没有响应更新

原创 [Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve

Vue项目 F12 Chrome 报警告如下图：[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as ‘passive’ to make the page more responsive. See 解决办法：一 :1.安装 default-passive-eventsnpm i default-passive-events -S -D

原创 TypeError: Cannot read property ‘parseComponent‘ of undefined解决办法

npm install vue-template-compiler@2.6.10 -d

原创 Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色

一、前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分 大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.css文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还

原创 布尔值0 和空字符串的真假判定

记录一下 , 以及后续知识点重点完善一下 console.log(Boolean(0)); //false console.log(Boolean("")); //false console.log( index!="");//当index为0时 => false

原创 HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。转自这里Video标签的使用Video标签含有src、poster、preload、autoplay、loop、controls

原创 解决 vue-admin刷新页面,页签 TagsView 丢失问题

复制下面的代码// 解决 vue-admin-template 刷新页面 TagsView 丢失问题 beforeUnload() { // 监听页面刷新 window.addEventListener("beforeunload", () => { // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据 let tabViews = this.visitedViews.map(ite..

原创 年月日时分秒计算时间差

// 计算时间区间, 如有返回开始时间和结束时间,则计算区间,// 如结束时间为空,则结束时间为当前时间,来算取已用时 getTime(startDate,endDate) { var end; if (endDate!='') { end = new Date(endDate.replace(/-/g, "/")); }else{ end = new Date(this.parseTime(new Date()).replace

原创 vue移动端h5页面根据屏幕适配的四种方案

方法一：引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案：（此处可点击）淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到具体引入和使用方法，移步github查看，非常详细。方法二：viewport 的使用github里边，有提到 viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详

原创 Vue自定义指令—解决H5页面不同尺寸屏幕的适配问题

基于vue框架针对H5在不同分辨率的手机做出来一套适配方案，具体如下：设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的： width:750px , height:1108px（可使用该方法应对其他设计图尺寸）一、以设计图的尺寸为标注的做一套适配方案，就是出完美高度比：function getResheightAndWidth() { //设计尺寸 w:750 h:1108 //1.计算屏幕实际尺寸width / 设计图宽度比 750 宽度比; //2.通过比例

原创 vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动

直接上成品代码<template> <div class="be-on-duty"> <!--nav--> <van-nav-bar title="值班" left-text="返回" class="nav" :fixed="true"> <template #left> <i class="icon-home" @click="goHome()"></i>

原创 vue element || vant 日历加农历、节日、节气，周六日改变颜色

前言vue项目里产品要求实现日历加农历、节日、节气，周六日改变颜色 ，文章里会举两个例子（element and vant ） ，仔细看完就明白是怎么回事了一、vant日历UI图如下vant原图如下官方并 无 农历显示的介绍日历区域可上下滑动， 故左右控制月份按钮去掉 ，且以平铺的形式展示开始加元素html<van-calendar ref="calendars" :poppable="false" :default-date="defaultDat

原创 手动控制 , 使el-select的下拉框隐藏掉

原创 主动手动控制el-popper的显示和隐藏

element-ui官方示例项目里的需求两个关联处的代码结构实现思路通过1处的点击,来控制右下角的铃铛处显示popper弹出框 , 网上搜寻资料查询到 ,想手动实现主动控制它的显示和隐藏, 组件上挂载的有方法 doShow()和doClose()于是在popper弹出框上写了一个ref节点 ,在1中通过this找到这个节点去调取节点上挂载的方法 ,就可以实现主动调取了 , 但是当我找到这个节点的时候 , 调取this.$refs.bottomElPopover.doShow()却丝毫不起

原创 js 截取指定字符前后的所有的字符串

let str ='/assetMaintainManagement/detailedList'; let result =str.substring(str.lastIndexOf("/")+1,str.length); console.log(result); // 输出结果 detailedList

原创 解决element组件位置偏移 , 包含 下拉框、 级联选择器、 popover组件、时间选择器

一 Select组件下拉位置错乱在select标签里写二 Popover组件位置偏移如果el-popover里面的数据是动态的，有时候会出现位置偏移不在可视区域范围内的情况，主要是popper-options这个参数要设置，还请大家看看popper.js的文档<el-popover ref="dcPopover" placement="left" width="797" trigger="hover" :popper-options="{ boundariesEleme

原创 element表格指定列,最后一列数据求和

官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。前端能处理的就尽量不走接口 , 尽可能缓解服务器压力效果图HTML<el-table :data = "tableData" border show-summary :summary-method="getSummaries" ></el-table>JS// 合计 getSummaries(param){ const { columns, data } =

原创 vue element 父组件控制清空子组件里的值

父组件<SelectPeople v-if="assetSetupDialogType == 2" @selectedPeople="getSelectedPeople" :select="1" :passInArray="passInArray" ref="selectPeople"/>重点在于这个ref ,ref表明的是子组件的dom节点子组件clearInput(){ this.peopleId = []; },...

原创 vue element父组件控制子组件弹窗关闭与否

父组件<el-button type="primary" @click="autographDialog = !autographDialog">手签弹窗</el-button> <HandSignature :autographDialog="autographDialog" @closeAutographDialog="autographCloseHandle" @autographData="getAutographData"

原创 Vue 多个select 不能重复选择相同属性的数据

第二种 , 根据当前选择的属性 , 去禁用相同属性的选项 ,意思就是相同属性的选项不可重复选择效果演示去除或者禁用 都是一样的道理 改一行代码就行, 这里不细说 ,直接贴代码吧<template> <div id="app"> <div v-for="(item, index) in selectList" :key="index"> <el-select v-model="item.value" st

原创 Vue 多个select 不能重复选择相同value的数据

开发过程经常会碰到多个Select同样的选项,选择后其他select不能继续选择,整合了两种类别的需求呈现方式第一种，不能重复选择相同value的数据，选择后其他select移出该项前言1.功能的实现是基于vue的计算属性computed2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总结，同时也希望笔者的想法能给大

原创 vue js 通用日期格式化

time为年月日时分秒 , pattern为你想要的时间格式比如 "{hh}:{ii}:{ss}"// 日期格式化export function parseTime(time, pattern) { if (arguments.length === 0 || !time) { return null } const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object')

原创 ElementUI日期时间选择器限制时间范围,禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择

需求:可选择的时间大于当前时间,不符合条件的全部禁用以下实现方式可精确到年、月、日、时、分、秒HTML<el-form-item label="盘点开始时间" prop="checkStartTime"> <el-date-picker type="datetime" placeholder="请选择开始时间" style="width: 100%" clearable format="yyy

原创 vue element-ui Tabs 标签页右侧更多功能

效果如下图代码如下:nuxt-link是因为我项目用的是nuxt, 它跟vue里面rout-link是一样的 自行修改即可<template> <div style="position: relative"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="要闻动态" name="first"> <ul&

原创 vue实现悬浮广告飘窗组件

<template> <!--悬浮小广告样式的提示信息--> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd" > <div style

原创 vue 实现无缝向左滚动 鼠标悬停、离开时停止、开始滚动

效果:可以根据此代码改为轮播html代码：<template> <div class="announcement"> <div class="cont"> <div class="contlist" ref="contlist" @mouseover="stopScroll" @mouseout="startScroll" > <u