vue
五月的猫0925
西红柿打卤面
展开
-
js插入div、css画三角形对勾
js往指定位置插入div、css画三角形对勾原创 2023-03-02 16:29:04 · 53 阅读 · 0 评论 -
vue+el-table给表格中每一行的自定义按钮添加独立的loading和点击事件
vue+el-table给表格中每一行的自定义按钮添加独立的loading和点击事件原创 2022-11-04 15:06:12 · 3834 阅读 · 2 评论 -
echarts报错 TypeError: Cannot read properties of null (reading ‘getAttribute‘)
echarts报错 TypeError:Cannot read property ‘getAttribute‘ of undefined原创 2022-06-02 16:18:48 · 10946 阅读 · 1 评论 -
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'...原创 2022-02-28 18:45:43 · 1569 阅读 · 0 评论 -
关于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 raphael@2.2.0-c.解决方案; 所有关于raphael版本限制的都在前面加“^”,手动修改为:...原创 2021-11-18 10:10:59 · 992 阅读 · 0 评论 -
关于el-switch开关无法点击的问题
关键知识点this.$forceUpdate()介绍this.$forceUpdate():是vue里面强制刷新的方法,一般用在数据层次太多,render函数无法自动更新,这时候需要手动更新,this.$forceUpdate()以此来更新数据和视图,触发updated生命周期,常用于for循环很多的时候或者嵌套很深的结构里面注意:1.一般如果el-switch默认值没有赋值的话,也有可能导致开关无法点击,这时候给value一个默认值可以解决2.开关无法点击的情况也有可能是z-index的原因,此时原创 2021-11-12 14:14:12 · 5443 阅读 · 0 评论 -
通过后端接口传入的数据,在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" ...原创 2021-11-06 11:22:29 · 902 阅读 · 0 评论 -
关于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="设原创 2021-10-22 10:52:39 · 378 阅读 · 0 评论 -
关于控制台
后端问题原创 2021-10-22 10:50:25 · 84 阅读 · 0 评论 -
webstorm配置vue模板 webstorm快速生成vue模板
vue模板:<template></template><script>//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)//例如:import 《组件名称》 from '《组件路径》';export default { //import引入的组件需要注入到对象中才能使用", components: { }, data() { //这里存放数据", return { ...原创 2021-09-15 10:39:04 · 4959 阅读 · 2 评论 -
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_原创 2021-09-14 13:54:19 · 971 阅读 · 0 评论 -
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原创 2021-09-11 15:21:01 · 5349 阅读 · 0 评论 -
给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原创 2021-09-09 19:05:29 · 1492 阅读 · 0 评论 -
给循环出来的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原创 2021-08-26 10:59:05 · 3075 阅读 · 0 评论 -
el-input输入框的clearable清空按钮挡住了文字
问题:el-input输入框的clearable清空按钮挡住了文字el-input有 :maxlength=“maxlength” clearable :show-word-limit解决:在el-input写style=“padding-right:100px”;设置的比原来的padding-right大一点就可以...原创 2021-08-25 15:26:49 · 3860 阅读 · 0 评论 -
el-form表单如何清除校验提示语
el-form表单如何清除校验提示语实现的表单如下:步骤1.当未选择持卡人时,点击确认按钮,提示校验规则步骤2.当选择关闭表单的时候,不会提示步骤3.再次点进表单的时候(此时持卡人栏没有任何数据),校验规则不出现问题:再次点击表单进入时,出现了校验规则解决办法:重点代码 :model=“fingerFrom”<el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di原创 2021-08-25 14:20:36 · 5706 阅读 · 0 评论 -
在vscode中创建一个符合eslint规范的.vue模板
步骤:打开vscode=>左上角“文件”选项=>选择“首选项”=>选择“用户片段”=>搜索“vue.json”=>选择vue.json并打开=>键入以下代码:{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " </div>", "</template>原创 2021-04-30 11:16:14 · 168 阅读 · 0 评论 -
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.转载 2021-04-29 18:56:26 · 4593 阅读 · 0 评论 -
vue中用vue-cli搭建的项目之el-menu导航栏切换到对应路由下的导航栏高亮
欢迎一起交流,可以要一个赞吗,嘿嘿具体效果图如下1.第一次进入,默认选中组件超市,注意看网址栏后面的item.name变化2.切换到我的发布3.在我的发布页面进行刷新导航栏组件如下1.重点://动态判断当前点击的导航栏是否和要跳转的路由name相同,//相同则切换到目标路由的同时,触发active属性,高亮导航栏:class="activeMenu == '/' + item.name ? 'active' : ''"//我这里的item.name其实就是要跳转路由后面的一串地址C原创 2021-04-29 18:32:31 · 1307 阅读 · 0 评论 -
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"> &原创 2021-04-23 16:30:01 · 3830 阅读 · 0 评论 -
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原创 2021-04-23 09:57:01 · 121 阅读 · 0 评论 -
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', //禁止空格报错检查原创 2021-04-22 19:05:56 · 2179 阅读 · 0 评论 -
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'原创 2021-04-22 16:59:14 · 213 阅读 · 0 评论