![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2
vue相关知识学习
前端~初学者
一个热爱羽球的前端初学者
展开
-
vue2中实现记住密码功能
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时,为了安全起见,需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码,展示了如何实现这个功能。原创 2024-06-17 10:53:19 · 331 阅读 · 0 评论 -
解决el-table设置固定高度后,展示不同列时表格高度变小bug
究其原因可知是el-table列动态发生变化后,el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。原创 2024-04-03 10:13:34 · 897 阅读 · 0 评论 -
vue2中vue-print-nb实现打印功能
若打印时,末尾总是出现空白页,则存在定义了height:100%的元素,删除掉此样式即可 通常都是因为存在以下样式导致,通常被定义在全局样式文件中,或index.html中。您可以通过在需要隐藏的div上添加class=“no-print”,然后在打印样式中设置该类的display属性为none来实现隐藏。设置打印内容样式,不影响页面原有样式 以下内容为设置 element table 在打印时的样式,防止打印不全。在要进行分页的标签上,添加以下样式。或者 在需要分页的内容最后加上。原创 2024-03-28 10:26:36 · 1159 阅读 · 0 评论 -
ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行。原创 2024-03-27 17:43:55 · 2869 阅读 · 0 评论 -
vue2 el-table指定某些数据不参与排序
【代码】vue2 el-table指定某些数据不参与排序。原创 2024-03-27 15:58:24 · 405 阅读 · 0 评论 -
vue2通过权限控制tab标签显示和隐藏
在开发过程中,我们可能会遇到这样一个场景:根据不同权限对tab栏内容进行控制,这时候用自定义指令v-permission就达不到我们想要的效果,其是将当前节点的子元素进行移除,此时当前节点依然存在,如下图所示。这时候就需要利用v-if自定义控制,其思路实:v-if中执行一个函数,函数传入一个权限值。在函数中判断权限值是否属于权限菜单内,返回布尔类型值。<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">原创 2023-11-28 15:08:49 · 1500 阅读 · 0 评论 -
解决Vue2封装组件含有echarts时多次调用出现id重复问题
封装组件中使用echarts时,多次调用导致id重复,出现页面不渲染、数据覆盖等问题。原创 2023-10-16 11:41:27 · 372 阅读 · 0 评论 -
vue实现卡牌数字动态翻牌效果
【代码】vue实现卡牌数字动态翻牌效果。原创 2023-07-26 23:14:43 · 1637 阅读 · 1 评论 -
前端Vue页面生成PDF
最近项目有个开发需求,将表格数据导出生成PDF,这种方法可以有两种。一种是直接调用打印,用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差,且体验不好,显然不是我们想要的效果。首先生成报告页面,也就是常规页面;然后将页面转换成图片( 用到的组件 html2canvas );最后将图片导出成PDF( 用到的组件 jspdf )。原创 2023-07-04 09:18:59 · 1165 阅读 · 0 评论 -
Vue2生命周期
该钩子函数执行后,实例创建完成,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,可以访问data、computed、watch、methods上的方法和数据。当数据发生变化,执行beforeUpdate()钩子函数,此时,内存中数据是新的,但是页面是旧的,也就是,在这个钩子函数中,页面和数据不同步。此时:内存中数据是新的,但是页面是新的,也就是,在这个钩子函数中,页面和数据保持同步。接下来的环节,移除监视、所有的子组件、(自定义)事件的监听器。原创 2023-06-28 15:40:49 · 1043 阅读 · 0 评论 -
Vue组件间通信的几种方式
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:父子组件通信;兄弟组件通信;跨级组件通信根据以上对这7种组件间的通信方法,可以将不同组件间的通信分为4种类型:父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信父子组件间通信子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。原创 2023-06-27 17:34:29 · 938 阅读 · 0 评论 -
对MVVM和MVC开发模式的理解
ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model,View 和 Model 之间的同步工作完全是自动的,无需人为干涉(由viewModel完成)。MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离,把Model和View关联起来的就是ViewModel。model,即数据模型,负责数据相关的任务,包括对数据的增删改查。原创 2023-06-27 13:45:26 · 463 阅读 · 0 评论 -
vue插件(vue-print-nb)实现打印功能
只需要给不自动换行的标签加上 word-wrap:break-word;注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。2.打印內容不自动换行问题。原创 2023-06-27 10:15:45 · 11220 阅读 · 4 评论 -
根据后端返回不同数据显示不同颜色
当前状态为充电时,显示"#15BC83",放电时显示"#FF811A",其他情况显示red。原创 2023-06-15 19:06:20 · 346 阅读 · 0 评论 -
Vue2—父组件通过 prop 传值给子组件,子组件值为空
data数据初始化为空,由于ajax是异步的,加载子组件时,请求数据还没赋值,就会把data里面空的数据给传过去,所以子组件props接收到的值则为空。子组件对父组件传递过来的值进行监听,如果val!== oldVal,则执行相应的逻辑。首先利用v-if判断返回的数据不为空,当powerstationId不为空再传给子组件。原创 2023-06-06 14:43:25 · 1041 阅读 · 0 评论 -
Vue2项目手撕table表格
【代码】Vue2项目手撕table表格。原创 2023-05-31 10:38:52 · 196 阅读 · 0 评论 -
解决screenfull插件加载报错
在vue.config.json添加 重启项目。解决screenfull插件加载报错。原创 2023-05-24 10:46:56 · 312 阅读 · 0 评论 -
vue2实现列表自动滚动
【代码】vue2实现列表自动滚动。原创 2023-04-26 13:25:48 · 931 阅读 · 0 评论