qq_42453751的博客

原创 vue+el-table给表格中每一行的自定义按钮添加独立的loading和点击事件

vue+el-table给表格中每一行的自定义按钮添加独立的loading和点击事件

原创 Vue中通过v-if控制的页面存在定时器，点击菜单栏切换页面，定时器清除没有生效

created()、activated()、deactivated()，vue清除定时器不生效 vue无法清除定时器

原创 【几张图片】

背景

原创 echarts报错 TypeError: Cannot read properties of null (reading ‘getAttribute‘)

echarts报错 TypeError:Cannot read property ‘getAttribute‘ of undefined

原创 el-table-column实现遍历后端接口数据和拼接接口返回的两个字段的数据并展示

拼接直接在prop里面使用逗号隔开写入即可 prop=Version,Type"el-checkbox是否勾选问题使用v-model绑定值：stat，由于使用了scoped,这里写的scoped.row.stat，使用change事件，处理是否勾选状态的变化，注意这里 的scoped.row.stat为布尔值，而要给接口传参的stat是字符串open/close，所以需要设置params.stat=row.stat?'open':'close'...

原创 el-form清除校验规则不生效的两种原因和分别的解决办法

1、原因：在 rules 验证规则内触发条件（trigger）添加了 change ，会在值改变的时候触发验证规则，所以在页面进入对表单 重新赋值 导致值改变，触发了 change 事件，从而触发验证规则。解决办法：将验证规则 rules 修改为只在 blur 条件下触发，去掉触发条件（trigger）里的 change ，这样就避免了赋值时触发 change 事件，导致验证表单。原来的校验规则里面是：改为：2、原因：校验规则清除方法clearValidate （）是对 DOM 的操作，解

原创 设置show-overflow-tooltip的宽度和.el-tooltip__popper无效问题的解决办法

效果：鼠标移入会显示内容在<style scoped></style>中设置宽度无效：<style lang="scss"scoped> .el-tooltip__popper{font-size: 14px; max-width:20% }</style>解决办法：在<style lang="css"></style>中设置...

原创 关于npm erro Maximum call stack size exceeded和 notarget No matching version found for raphael报错

问题一：npm ERR! Maximum call stack size exceeded解决办法：升级npm，npm install npm -g问题二：npm ERR! notarget No matching version found for [email protected].解决方案; 所有关于raphael版本限制的都在前面加“^”，手动修改为：...

原创 关于el-switch开关无法点击的问题

关键知识点this.$forceUpdate()介绍this.$forceUpdate()：是vue里面强制刷新的方法，一般用在数据层次太多，render函数无法自动更新，这时候需要手动更新，this.$forceUpdate()以此来更新数据和视图，触发updated生命周期,常用于for循环很多的时候或者嵌套很深的结构里面注意：1.一般如果el-switch默认值没有赋值的话，也有可能导致开关无法点击，这时候给value一个默认值可以解决2.开关无法点击的情况也有可能是z-index的原因，此时

原创 通过后端接口传入的数据,在v-for遍历出来的el-option通过nodeId后端参数进行过滤

<el-select style="width: 100%" v-else-if="valData[index].valueType == 'upDeviceId'&&valData[index].attrId!==config.ENERGY_TYPE" v-model="valData[index].attrVal" ...

原创 关于window.location.href用法

当前页面打开URL页面self.location.href="/url"location.href="/url"windows.location.href="/url"this.location.href="/url"在父页面打开新页parent.location.href="/url"在顶层页面打开新页面top.location.href="/url"刷新当前页面1.window.location.Reload():当有数据提交的时候，会提示是否提交2.window.locatio

原创 刷题笔记2

块级元素： div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr行内元素： span、img、a、label、code、input、abbr、em、b、big、cite、i、q、 textarea、select、small、sub、sup，strong、u1.关于javascript的原始类型（primitive type），错误的是正确答案: D 你的答案: C (错误)A:有5种primitive type，分别是Undefined、Nul

原创 css笔记1

background背景简写属性body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}当使用简写属性时，属性值的顺序为：background-color 设置元素的背景颜色。background-image 把图像设置为背景。background-repeat 设置背景图像是否及如何重复。（no-repeat repeat-x）background-attachment 背景图像是否固定或者随着页面的其余部

原创 关于prop、:model、el-form清除校验规则

①prop的字段是校验规则rulesDevice里面需要校验的字段②el-form里面的Model（:model=“formDevice”）是el-form-item里v-model要取的（v-model=“formDevice.deviceCode”----要取formDeviced的,就用formDeviced.xxxx）。<el-dialog :close-on-click-modal="false" v-dialogDrag title="设

原创 关于控制台

后端问题

原创 webstorm配置vue模板 webstorm快速生成vue模板

vue模板：<template></template><script>//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）//例如：import 《组件名称》 from '《组件路径》';export default { //import引入的组件需要注入到对象中才能使用", components: { }, data() { //这里存放数据", return { ...

原创 vue These dependencies were not found: * core-js/modules/es.array.iterator in ./node_modules/@babe

在npm run serve的时候出现：These dependencies were not found:* core-js/fn/array/flat-map in ./node_modules/@babel/polyfill/lib/noConflict.js* core-js/fn/promise/finally in ./node_modules/@babel/polyfill/lib/noConflict.js* core-js/fn/string/pad-end in ./node_

原创 css中可继承的属性

继承概念：子节点默认用父节点的样式属性可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。所有元素可继承：visibility和cursor。内联元素可继承：1.letter-spacing：是增加（值为正）或减少（值为负）字符间距；2.word-spacing：字间距属性增加或减少字符间的空白（即字间隔）。 letter-spacing定义的是字与字之间的距离word-spacing控制的是字与字之间 空格的宽度3.white-space：规定段

原创 el-date-picker设置选择时间不能大于当前时间

重点代码 :picker-options=“pickerOptionsStart”<el-date-picker v-model="timeRange" type="daterange" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd" :range-separator="$t('pag

原创 给el-input设置padding-right不生效(父组件改变子组件样式)

当给div或者el-input 设置id 或者在样式处使用！important再添加Padding效果不生效，启用插槽也不管用，F12找到el-input样式处前面的类名==.el-input–suffix .el-input__inner==，再在类名前面给加上==/deep/就生效重点代码：/deep/==.el-input–suffix .el-input__inner<div class="filter-input-inner" style="width: 100%"&g

原创 给循环出来的el-col中，特定的el-col加自适应滚动条

关于如何在一个用循环写的el-row里面单独设置el-col，并且给fileCause失败原因加一个自适应滚动条，刚开始不给el-col加div,只在span里面加滚动条是不生效的，加了div，在div里面加滚动条让这个div包裹这个el-col就可以生效<el-row v-for="(item, index) in detailInfo" :key="index" type="flex"> <el-col :class="index===detailInfo.length

原创 el-input输入框的clearable清空按钮挡住了文字

问题：el-input输入框的clearable清空按钮挡住了文字el-input有 :maxlength=“maxlength” clearable :show-word-limit解决：在el-input写style=“padding-right:100px”;设置的比原来的padding-right大一点就可以...

原创 el-form表单如何清除校验提示语

el-form表单如何清除校验提示语实现的表单如下：步骤1.当未选择持卡人时，点击确认按钮，提示校验规则步骤2.当选择关闭表单的时候，不会提示步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现问题：再次点击表单进入时，出现了校验规则解决办法：重点代码 :model=“fingerFrom”<el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di

原创 在vscode中创建一个符合eslint规范的.vue模板

步骤：打开vscode=>左上角“文件”选项=>选择“首选项”=>选择“用户片段”=>搜索“vue.json”=>选择vue.json并打开=>键入以下代码：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " </div>", "</template>

转载 vue项目中css默认样式初始化文件

//css默认样式初始化大全html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,d.

原创 vue中用vue-cli搭建的项目之el-menu导航栏切换到对应路由下的导航栏高亮

欢迎一起交流，可以要一个赞吗，嘿嘿具体效果图如下1.第一次进入，默认选中组件超市，注意看网址栏后面的item.name变化2.切换到我的发布3.在我的发布页面进行刷新导航栏组件如下1.重点：//动态判断当前点击的导航栏是否和要跳转的路由name相同，//相同则切换到目标路由的同时，触发active属性，高亮导航栏:class="activeMenu == '/' + item.name ? 'active' : ''"//我这里的item.name其实就是要跳转路由后面的一串地址C

原创 Vue之el-carousel走马灯

<template> <!--动态将图片轮播图的容器高度设置成与图片一致--> <el-carousel height="260px" trigger="click" :autoplay="false"> <el-carousel-item v-for="item in imagebox" :key="item.id"> <img :src="item.idView" class="image"> &

原创 vue-cli echarts可视化的方法

方法一：直接引入ehcarts使用Vue create 项目文件名 创建好项目之后,使用cd 项目文件名进入项目里面，再使用命令npm install echarts -S下载echarts在src下面的main.js文件中添加代码块import echarts from 'echarts' Vue.prototype.$echarts = echarts3.在src\components目录下新建Test.vue文件，代码如下<template> <div

原创 vue关于eslint空格缩进等的报错问题

解决办法：在.eslintrc.js文件中添加如下代码： rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', //禁止console报错检查 'no-console': 'off', //禁止空格报错检查

原创 Vue-cli引入echarts报错 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

解决办法：在src目录下的main.js文件中echarts的引入方式改为下面的：// import echarts from 'echarts'import * as echarts from 'echarts'

原创 2020-10-12

1.什么是HTML,CSS？是做网站的编程语言，浏览器先解析代码，然后就会看见网站的效果2.怎么查看网站的源代码？鼠标右键选择查看网页源代码3.一个网站由多个网页组成，一个网页=一个.html4.什么是HTML CSS JAVAscript?HTML:结构化 超文本标记语言CSS：样式Javascript:行为（交互）5.ctrl+s 保存 ctrl+A全选 ctrl+x剪切 ctrl+z撤销 ctrl+y前进 shift+end从头选中一行 shift+home从尾部选

原创 刷题笔记03

1 $(function(){ // alert($("#div1").css("width")); //"100px" 字符串 alert($("#div1").width()); //width：100 alert($("#div1").innerWidth()); //width + padding alert($("#div1").outerWid...

原创 刷题笔记2

块级元素： div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr行内元素： span、img、a、label、code、input、abbr、em、b、big、cite、i、q、 textarea、select、small、sub、sup，strong、u1.关于javascript的原始类型（primitive type），错误的是正确答案: D 你的答案: C (错误)A:有5种primitive type，分别是Undefi...

原创 刷题笔记1

1.如何产生带有正方形项目的列表（C）A:type: squareB:type: 2C:list-style-type: squareD:list-type: squarelist-style-type 用于设置不同列表列表项的样式。无序列表常使用：ul {list-style-type:circle; /* 每一项前都是圆圈 /}ul {list-style-type:square; / 每一项前都是正方形 */}有序列表也可以用 list-style-type 来设置列表项

原创 ECMA5和ECMA6笔记

call格式：函数名.call();参数：第一个参数：传入该函数this指向的对象，传入什么强制指向什么第二个参数开始：将原函数的参数往后顺延一位。 // show.call("call", 20, 40); apply 格式：函数名.apply() 参数： 第一个参数：传入该函数this指向的对象，传入什么强制指向什么

原创 正则表达式与localStorage

本地存储技术:localStorage(IE8以下不兼容)1、永久存储2、最大可以存储5M 客户端的一个微型数据库3、只能存储stringcookie1、可以设置过期时间2、最大可以存4KB3、每一个域名下面最多可以存储50条数据sessionStorage（结合后台使用） localStorage 对象 setItem(name, value); getItem(name);

原创 npm安装express出现的问题

注意注意！！！一定要用Window PowerShell(管理员)（A）打开安装最新版本npm方法有：① npm install npm -g②npm i -g npm2.如果出现以下报错connectivity …解技办法：①换下载源npm config set registry=http://registry.npmjs.org②http://127.0.0.1:8087是本地goagent的代理...

原创 bootstrap：Sass与Less知识点梳理

24/100保存草稿发布文章 博文管理我的博客退出加粗 斜体 标题 删除线 无序 有序 待办 引用 代码块 BashCC++C#CLikeCSSGoHandlebarsJavaJavaScriptKotlinMarkupObjective-CPerlPHPShellPythonRubySQLSwiftVB.NetYAML图片 视频 表

原创 面向对象之ECMA6_class语法

原创 Web前端-----英译汉词典的实现

主程序：英译汉词典.html子程序：demo.js