zhengyun1568的博客

<popover ref="isWeiboType" v-model="isWeiboType" width="78" popper-class="select-wary"> <div class="select-item"> <p v-for="(item,i) of weiboSearchItme.type" :key="item.value" :class="i == weiboType ?'hover':''" @click.stop="s

原文链接在项目中通过命名视图在很多个页面行都设置了头部组件，在项目中就遇到了这么一个问题，这个头部只会加载一次，事实上虽然头部会公用，但是不是所有的头部都一样的，有些页面的头部需要做一些多余的功能，该怎么搞在mounted中定义方法是没用的，因为头部只会加载一次，这时我们就可以通过监控路由，路由变化了，就会执行函数，就可以实现不同页面显示不同的头部了。 watch: { '$route': 'judgeHelp' }, methods: { // 判断help页面显示与否

由于企业微信vue hash模式下网页授权返回的路径：http://xxx/?code=otRG0-v6GX6L87pCkJOZW_XwAH2e9xcuclVlL5-eobk&state=#/question，拼接code在#之前需要用正则方法（getUrlKey('code')）拿到对应codecreated() { // 由于企业微信vue hash模式下网页授权返回的路径：http://xxx/?code=otRG0-v6GX6L87pCkJOZW_XwAH2e9xcuclVlL5-eo

原文链接：https://blog.csdn.net/fufu_dclt/article/details/105137041安卓：在 index.html 中添加 meta 标签。<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, use

原文链接：https://www.jianshu.com/p/22f0f589e6c6scrollTopAnimate(id){ this.$nextTick(()=>{ window.scrollTo({top:document.getElementById(id).offsetTop - 138, behavior: 'smooth'}) // 假如是指定的div内的内容滚动到指定位置 document.querySelector('#se

原文链接：https://blog.csdn.net/qq_42335214/article/details/112705193?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_aggregation-17-112705193.pc_agg_rank_aggregation&utm_term=elementui%E6%97%A5%E6%9C%9F%E

组件网址：https://packy-tang.gitee.io/vue-tinymce/#/Example1.安装npm install @packy-tang/vue-tinymce2.将node-module中的tinymce文件整个拷贝到public文件下3.先去这里下载zh_CN语言包，解压然后放置到‘public/tinymce/langs/zh_CN.js’文件下或者浏览器直接输入https://www.tiny.cloud/tinymce-services-azure/1/i18n

注意：当div在dialog中时可能会出现，第一次弹出dialog拖拽管用，第二次弹出dialog拖拽没用，此时可以给dialog加一个v-if，强制重新渲染一下。具体为啥，我也说不出所以然<div id="scrollbarBox"> <Scrollbar wrap-style="overflow-x: hidden;" extend="true" view-class="el-autocomplete-suggestion__list" wrap-

处理方法1从网上找的解决办法原文链接：(https://www.jb51.net/article/162258.htm)[https://www.jb51.net/article/162258.htm]创建js文件：// src/mixins/fackClickOutSide.jslet lock = true;let el = null;const MousedownEvent = new Event('mousedown', {bubbles:true});const MouseupEve

原文链接：https://www.cnblogs.com/suiyide/p/14511683.html当出现多个滚动条，滚动元素父级滚动条会随着动，但是滚动父级的父级滚动条不会随着动Select加上:popper-append-to-body=“false”Cascader加上:append-to-body=“false”...

方法一：<el-tree class="filter-tree" show-checkbox :data="data" :props="defaultProps" default-expand-all node-key="id" :default-checked-keys="checkedKeys" :filter-node-method="filterNode" ref="tree" @check-change="nodeChange"

原文链接：https://blog.csdn.net/qq_42345108/article/details/102842492resumeDownload(data) { return request({ url: app.resumeDownload, method: 'post', data, responseType: 'blob' // 请求头必须加 }) },// 下载简历压缩包 downZip(id) {

1.下载插件npm install qrcodejs2 --save2.引入import QRCode from "qrcodejs2";3.使用<div id="qrCode" ref="qrCodeDiv"></div>// 为了防止重复生成二维码，使用置空进行控制document.getElementById("qrCode").innerHTML = "";// "qrCode"为上面二维码容器的id名，也可以写为‘this.$refs.qrCodeDi

下载插件npm install clipboard --save引入import Clipboard from "clipboard";使用,data-clipboard-text中是动态绑定的链接<el-button type="text" @click="copyInputCase" class="copy-inputCase" :data-clipboard-text="imgLink"> 复制链接</el-button>// 复制c

// 手动改变tree树默认选中值let keys = ['customerName']dataChecked.forEach((item, index) => { keys.push(item.attribute)});this.checkedKeys = keys// 保持原有排序状态下增减if (this.dataChecked.length === 0) { this.dataChecked = JSON.parse(JSON.stringify(dataChecked)

<el-button plain :disabled="!dydShow" @click="codeClick"> 获取验证码 <span v-if="!dydShow">({{ codeTimer }}s)</span></el-button>if (!this.timer) { // 倒计时间 this.codeTimer = 60; // 判断时间是不是要显示 this.dydShow = false; // 设置倒计时定时器

<el-tree class="filter-tree" :data="dataChecked" :empty-text="emptyText" :props="defaultProps" default-expand-all draggable :allow-drop="collapse" :filter-node-method="filterNode"></el-tree>data和methods中数据dataChecked: [],d

原文链接：https://blog.csdn.net/xfWgaoqiang/article/details/108845967<el-form-item v-else label="密码" label-width='150px' prop="password"> <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input></

1.先下载插件npm i -S vuedraggable中文文档：http://www.itxst.com/vue-draggable/tutorial.html2.引入import draggable from "vuedraggable";components: { draggable },2.vue中使用<draggable :list="dataChecked" :disabled="!enabled" class="list-group" ghost-cla

转载自：https://my.oschina.net/u/3680343/blog/3144548https://www.cnblogs.com/shuen/p/10196545.html给table设置样式，解决底部边框被遮盖.el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式}.el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式}添加css

转载自：https://www.jb51.net/article/203011.htm给操作列绑定宽度属性:width="actionColWidth < 80 ? 80 : actionColWidth"把操作列的所有按钮用一个div套起来<div class="action-col"> <el-button></el-button> ...</div>data里设置列宽初始值actionColWidth: 80, //表格操作列

结束日期不能大于开始日期<el-date-picker v-model="addForm.startDate" type="date" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd"...

例如：str="{Candidate_Name}，您好，{Company_name}邀请您参加{Job_Title}面试，面试日期：{Date}，面试时间：{Time}，面试地点：{Position}"/g表示全局替换 // 替换邮件模板值 replaceTemplate(str) { return (str = str .replace(/{Candidate_Name}/g, '小明') .replace(/{Company_name}/g, 'x

效果图：css样式该样式写的时候不要加scoped，否则会没有用// 禁用时的样式.el-slider__runway.disabled .el-slider__bar{ background-color: #e0eaf3; } .el-slider__button { width: 10px; height: 15px; background: #7589d4; border: none; border-radius: 0; } .el

原文链接： https://blog.csdn.net/acoolper/article/details/97375142获取按钮方法，以及判断是否有权限方法jsimport store from '../../store'import Vue from "vue";export default { namespaced: true, state: { btnlist: [], // 按钮权限列表 }, getters: { btnlist: (state) =&g

效果图：<el-steps :active="activeIndex" align-center finish-status="wait"> <el-step v-for="(item, index) in bzt_value" :key="item.id" :title="item.name" icon="iconfont iconyuandian" @click.native="dianji_bzt(index, item.process_

其中：webUrl是在env.development.js中定义的公共路径在页面获取传值通过：this.$route.query.company 获取，以此类推this.interviewList.description + ` <div> <a type="button" style=" display: inline-block; backgr

效果图：<el-switch v-model="ruleForm.status" class="tableScopeSwitch" :active-value="0" :inactive-value="1" active-text="开" inactive-text="关" active-color="#3072ae" ></el-switch> ><style lang="scss">.table

val值为下面的参数<div style="color: green; font-size: 40px"> <p>我是p标签</p></div>js通过正则表达式过滤val.replace(/<\/?.+?>/g, '')

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-it

转载链接：https://blog.csdn.net/weixin_39897287/article/details/101757746返回的后台数据是含有换行符的，但是界面显示不换行。后面发现用v-html就可以解决<div class="text" v-html="trainDetail.trainingContent"></div>然后js代码里面还要处理一下let aa= this.xxx.name.replace(/\n/g,"<br>");thi

转载自：https://blog.csdn.net/qq_42221334/article/details/995669151.安装插件cnpm install vue-json-excel2.min.js中引入使用import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.直接在页面中使用<download-excel class = "export-excel-wra

mixins文件export default function(height) { return { data() { return { tableHeight: 500 } }, created() { this.getClientHeight() }, mounted() { window.onresize = () => { this.getClientHeight() } }, methods: { getCl

**背景：**vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置本次解决采用 element-resize-detector 可以完美的解决**思路：**因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不会随之改变element提供的 element-resize-detector 可以轻松解决问题的存在

原文链接：https://www.cnblogs.com/zhenchoafeng/p/10863729.htmlnode.js Windows解决npm命令没有反应今天项目关闭再启动后一直停在npm run dev处没有反应，在cmd中输入npm -v没反应解决办法如下：是npm config set prefix 改包的路径出问题了解决办法就是删除c:/user/administrator下的 .npmrc 文件即可。然后输入npm -v 完美解决...

原文链接：https://blog.csdn.net/quhongqiang/article/details/98218989// 第一种方法let obj ={"name":"tom","age":16}let key = "id";let value = 2obj[key] = value;console.log(obj) // 第二种方法，利用扩展运算符,简单又实用var obj1={"vue":300,"jquery":200};var obj2={"react":500};v

原文链接:https://www.cnblogs.com/huanhuan55/p/12302333.html<el-input v-model="student.name"></el-input>export default { data () { return { student:{} } }, methods: { update () { this.student.name='莉莉丝' }

父页面<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane name="aaa"> <span slot="label"> 页面一<el-badge :value="val1"></el-badge> </span>

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <s

转载自：https://blog.csdn.net/MonsteriU/article/details/103782752promise实现function1(){ // 你的逻辑代码 return Promise.resolve()}function2(){ // 你的逻辑代码 return Promise.resolve()}// 调用function3(){ this.function1().then(val => {