vue
软件测试小菜鸟正在更新中
每一位程序员都不是利益驱动型的而是创新驱动型的
展开
-
犯了个低级错误-箭头函数
箭头函数没输出,数组的fin方法原创 2022-06-09 08:39:41 · 467 阅读 · 0 评论 -
动态增删el-input并且单独给每个el-input添加校验信息
动态的el-input增添校验原创 2022-06-08 13:50:39 · 2235 阅读 · 1 评论 -
props父传子类型Object
当父传子类型是Object时,子组件props定义类型如下: propsData: { type: Object, default: function () { return { type: 0, }; }, },原创 2022-05-27 10:11:05 · 1475 阅读 · 0 评论 -
element admin框架里的utils工具类里写了个js方法如何在vue文件里使用
在utils文件夹里有很多js文件,里面写了好多工具类供使用。创建完js文件工具类后,需要在vue文件里使用。使用方法:例如:utils文件夹里的handleDate.js里声明了dateMessage方法。在vue文件里:①导入 import { dateMessage } from ‘@/utils/handleDate’;②在method函数里声明③再需要的地方使用...原创 2022-04-12 18:15:25 · 999 阅读 · 0 评论 -
echarts处理返回的图例和数据是数组嵌套数组格式时的方法
当返回的数据格式是单个数组的时候,可以直接循环datas传入echarts组件进行复用。处理方式:tableData是接口的datas对象数据。<el-scrollbar ref="scrollbar" style="height:100%; width:100%;"> <el-row type="flex" justify="space-between" style="flex-wrap:wrap;height:30%"> <el-c原创 2022-03-14 16:55:39 · 1773 阅读 · 0 评论 -
vscode里设置vue单文件的模板格式
参考文章https://www.cnblogs.com/lwming/p/10941213.html转载 2022-03-14 10:53:08 · 208 阅读 · 0 评论 -
npm install错误 unable to access
在git上拉取了一个项目,npm install的时候,出现下面无法访问的错误。下面我的解决方法是:把 npm install改成:npm install --registry=https://registry.npm.taobao.org从淘宝镜像下载就可以成功了。原创 2022-03-08 10:23:14 · 492 阅读 · 0 评论 -
vue中使用this.$loading()给整个页面添加遮罩
如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading。调用方法:this.$loading()this.$loading().close()使用步骤:1、完整引入了 Elementimport ElementUI from 'element-ui' // pc端组件2、在向后台发起请求前调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.lo转载 2022-03-04 13:55:10 · 12517 阅读 · 0 评论 -
后台返回来的是这种数据,是什么格式啊
这一串数字是什么,无限不循环小数吗原创 2022-03-03 10:46:28 · 75 阅读 · 0 评论 -
“router-link”各种属性解释
1.”:to” 属 性相当于a标签中的”herf”属性,后面跟跳转链接所用HomeHome2.”replace” 属 性replace在routre-link标签中添加后,页面切换时不会留下历史记录3.”tag” 属 性具有tag属性的router-link会被渲染成相应的标签HomeHome此时页面的li同样会起到a链接跳转的结果,vue会自动为其绑定点击事件,并跳转页面4.”active-class” 属 性这个属性是设置激活链接时class属性,也就是当前页面所有与当前地转载 2022-02-09 09:07:45 · 1102 阅读 · 0 评论 -
一文读懂鼠标滚轮事件(wheelEvent)
https://segmentfault.com/a/1190000017390159?utm_source=tag-newest<template> <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll" > <slot/> </el-s转载 2022-02-09 08:53:47 · 1016 阅读 · 0 评论 -
设置提示框位置随鼠标移动,并解决提示框显示不全的问题
https://www.cnblogs.com/zhilu/p/14047105.htmltooltip: { trigger: 'axis', // position: ['50%', '50%'], position: function(point, params, dom, rect, size) { var x = 0; var y = 0;转载 2022-02-08 16:35:38 · 561 阅读 · 0 评论 -
$router.back(-1)
$router.back(-1),跳到上一个网址路由。<el-button type="text" icon="el-icon-arrow-left" style="font-size:22px" @click="$router.back(-1)">返回</el-button>原创 2022-02-07 09:05:06 · 518 阅读 · 0 评论 -
自定义el-table最后一行
自定义el-table最后一行转载 2021-12-27 18:24:05 · 2202 阅读 · 0 评论 -
el-table根据el-table-column的数据条数动态设置表格行的高度和字体大小
<el-table :data="tableData" :style="tableStyle" :cell-class-name="cellClassFn" :cell-style="{ padding: '0px' }" :max-height="tableHeight" :row-style="{ height: rowHeight }" border stripe fit >原创 2021-12-27 09:06:09 · 3009 阅读 · 0 评论 -
设置定时器和清楚定时器setInterval
设置定时器:vue文件一般写在mounted方法里。起定时器的名字this.reGetData。1秒=1000毫秒。 this.reGetData = setInterval(() => { this.fetchData(); }, 60000);清除定时器:在vue的beforeDestroy钩子函数里: beforeDestroy: function() { if (this.reGetData) { //如果存在定时器就清除 clearInt原创 2021-12-27 08:55:54 · 915 阅读 · 0 评论 -
关于e.target.value
每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值。例如:$('.target1').change(function(e) { $("#result").html(e.target.value) });e.target就等价于(′target1′)故e.target.value就等价于('t转载 2021-12-21 08:47:59 · 1112 阅读 · 0 评论 -
vue动态绑定样式
<div :class="{ active: isActive }"></div>active是定义的样式名,isActive是满足的条件,如果是true,样式active被追加上去。原创 2021-12-11 10:03:28 · 225 阅读 · 0 评论 -
vue中,空格转义字符&emsp;  ;均不能起效果,无论加几个都只显示一个英文空格
https://www.cnblogs.com/ywz-boke/p/13297682.html转载 2021-12-11 09:33:36 · 4157 阅读 · 0 评论 -
vue中使用vue-print-nb实现打印功能
第一步:安装 “vue-print-nb”: “^1.7.5”,第二步,页面引入import Print from ‘vue-print-nb’;第三步:声明指令directives: { Print }第四步:使用指令v-print="’#paycode’" <span slot="footer"> <el-button v-print="'#paycode'" type="primary">打印二维码</el-button> </span原创 2021-12-10 13:54:46 · 573 阅读 · 0 评论 -
vue中使用“qrcodejs2“: “^0.0.2“生成二维码
第一步,安装 “qrcodejs2”: “^0.0.2”,第二步,页面引入import QRCode from ‘qrcodejs2’;第三步使用: // 展示二维码 printQcode(x, y) { this.innerVisible = true; // 二维码内容 this.qrcode = y; // 使用$nextTick确保数据渲染 this.$nextTick(() => { this.crat原创 2021-12-10 13:44:30 · 509 阅读 · 0 评论 -
render: h => h(App)是谁的缩写?
https://www.jianshu.com/p/b68184695e1f原创 2021-12-10 13:09:11 · 75 阅读 · 0 评论 -
Vue中打印表格功能
https://www.jianshu.com/p/72a26105e72a原创 2021-12-09 09:48:22 · 502 阅读 · 0 评论 -
element ui的el-scrollbar进入页面自动更新长度
el-scrollbar是element ui的滚动条,它的底层代码里面有两个方法,一个是unpdate(),一个是handleScroll()。具体可以参考https://blog.csdn.net/weixin_34025051/article/details/92508359它原本是随着页面的长度自适应自己的长度的,现在有一种情况,就是进入页面滚动条的长度没有自动更新,需要人为的手动刷新才可以更新滚动条的高度。是因为页面每次刷新的时候才会重新计算页面的高度,进而更新了滚动条高度。那怎么让页面一进来原创 2021-12-02 08:50:45 · 2442 阅读 · 0 评论 -
vue中component的用法
渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。如果是组件A,就缓存,并展示。一般:is绑定一个变量,动态改变显示的组件。<keep-alive> <component :is="A" style="width:100%;margin-top:.2rem" /> </keep-alive>...原创 2021-11-17 10:01:41 · 660 阅读 · 0 评论 -
click.native的用法
当你给一个vue组件绑定事件的时候,要加上native,否则不起作用,如果是普通的html元素,就不需要。原创 2021-11-17 09:49:53 · 742 阅读 · 1 评论 -
window.onresize和window.addEventListener
vue中在mounted中window.onresize不生效是因为:引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。把window.onresize改为window.addEventListener window.onresize = () => { if (screenfull.isFullscreen) { this.show = false; this.tableHeight = w原创 2021-11-05 14:04:56 · 873 阅读 · 0 评论 -
一个vue组件重复使用,数据不同实现方法
当我们页面上,有好多相同的图表(echarts)或者表格(table)的时候,但是只是表里的数据显示的不同。这时候可以不用每个表都新建一个.vue文件,可以公用一个组件,动态传递不同的数据。下面就实现如何动态传递组件里的数据,从而减少文件新建的冗余。先看图:我们不需要创建5个相同的.vue组件文件,只需要创建一个就行。首先创建index.vue文件,在创建组件worksShopTable.vue组件文件。在index.vue里请求数据,并且返回给组件。(这里用虚拟数据,没有从接口请求)data()原创 2021-10-14 13:52:20 · 8212 阅读 · 0 评论 -
el-table-column动态绑定label属性
el-table-column动态绑定label属性 <el-table-column label="停炉工时"> <el-table-column :label="`${(standardParameter.shutdownTime)}min`"> <template slot-scope="scope"> {{ scope.row.cc_stop_cost }} </template原创 2021-08-16 11:56:46 · 1029 阅读 · 0 评论 -
el-table背景颜色变成透明
总结一次element ui中el-table的背景颜色变成透明的问题刚开始使用了opacity=0.5<el-table style="opacity=0.5;width="100%"></el-table>发现这样写,背景和文字都变成了透明色。导致文字展示模糊。背景也不能完全透明。接下来使用了网上的各种方法:.regional_table /deep/ .el-table, .el-table__expanded-cell { background-col原创 2021-09-28 09:01:57 · 6247 阅读 · 9 评论 -
vue解决跨域问题
一.什么是跨域跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了解决方案查看:https://www.cnblogs.com/lihaohua/p/12372267.html...转载 2021-08-24 15:00:04 · 91 阅读 · 0 评论 -
为什么template必须有且只能有一个div呢?
单文件组件 当我们在vue-cli脚手架搭建的vue开发环境下使用单文件组件时,一般会这么写:<template> <div class="box"> 这里是页面内容 </div></template>如果我们尝试在template标签下写两个div,那么编辑器会提示我们***The template root requires exactly one element。***那这里为什么template下也必须有且只能有一个div呢原创 2021-08-24 13:37:15 · 7861 阅读 · 0 评论