疑问 搜索 动手 解决 记录

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

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

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

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

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

效果图图标名字自行替换<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

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

一、效果图二、代码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=

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

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

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

npm install vue-template-compiler@2.6.10 -d

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

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

现在如果要在页面中使用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-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

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

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

直接上成品代码<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 and vant ） ，仔细看完就明白是怎么回事了一、vant日历UI图如下vant原图如下官方并 无 农历显示的介绍日历区域可上下滑动， 故左右控制月份按钮去掉 ，且以平铺的形式展示开始加元素html<van-calendar ref="calendars" :poppable="false" :default-date="defaultDat

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

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

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

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

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

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

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

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

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')

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

效果如下图代码如下: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&

<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

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

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

文章最后有答案遇到这个问题 ,起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。困惑许久 , 查询良久 ,列出了几个网上大仙们给的答案 , 如下:一 . 降低版本系列(已尝试 , 垃圾没有效果)二 . 重装tabs插件,全局引入系列(已尝试 , 垃圾没有效果)三 . 算了直接给你们放最搞笑的一个(虽然搞笑,但是是唯一一个成功的)哈哈哈哈,没有看到这图上评论的时候 , 我和同

nuxt vue项目编译时 出现报错EPERM: operation not permitted, lstat ‘E:/XXXXXXXXXXXXXXXX’自动编译时模块找不到或者编译失败出错,关掉编辑器重新启动就行了

Error:Node Sass version 5.0.0 is incompatible with ^4.x 问题解决此错误来自sass-loader.因为node-sass@latest为v5.0.0,而sass-loader期望值为^4.0.0目前解决方案如下：//卸载 node-sassnpm uninstall node-sass//然后安装最新版本（5.0之前）npm install node-sass@4.14.1...

1 、安装插件 vue-esignnpm install vue-esign --save2、在main.js引用import vueEsign from 'vue-esign'Vue.use(vueEsign)3、页面中使用<vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="line