分类：vue

2020
12-02

vue element实现表格合并行数据

vue element实现表格合并行数据 本文实例为大家分享了vueelement实现表格合并行数据的具体代码，供大家参考，具体内容如下支持不分页的表格数据，分页的表格数据还有小bug<template><el-container><el-main><el-table:data="tableData"borderstyle="width:100%":span-method="objectSpanMethod"//添加这个实现行数据合并><el-table-columnlabel="序号"prop="id"align="center"></el-table-column><el-table-columnlabel="名字"prop="screenNam... 继续阅读 >
2020
12-02

Vue Elenent实现表格相同数据列合并

Vue Elenent实现表格相同数据列合并 本文实例为大家分享了VueElenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下作者：秋名思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。）template：<el-table:span-method="objectSpanMethod4"//在el-table里面添加合并单元格属性>Js:data(){return{orderda... 继续阅读 >
2020
12-02

vue中defineProperty和Proxy的区别详解

Proxy的出现，给vue响应式带来了极大的便利，比如可以直接劫持数组、对象的改变，可以直接添加对象属性，但是兼容性可能会有些问题Proxy可以劫持的数组的改变,defineProperty需要变异defineProperty中劫持数组变化的变异的方法可以理解为在数组实例和原型之间，插入了一个新的原型的对象，这个原型方法实现了变异的方法，也就真正地拦截了数组原型上的方法我们来看下vue2.x的源码//vue2.5.0vararrayProto=Array.prototype;v... 继续阅读 >
2020
12-02

详解Vue 的异常处理机制

最近需要在业务中加一个全局的filter，filter会对输入进行验证，用于进行前端监控。其中一个要处理的问题，就是验证失败后如何发送异常日志，这个过程中顺便了解了一下vue的异常处理机制。errorCaptured、errorHandlervue提供了两个API用于异常的捕获，分别是errorCaptured和errorHandler：errorCapturederrorCaptured是组件的一个钩子函数，用于在组件级别捕获异常。当这个钩子函数返回false时，会阻止异常进一步... 继续阅读 >
2020
11-29

Vue用mixin合并重复代码的实现

Vue用mixin合并重复代码的实现       在我们做项目的时候，往往有很多代码逻辑是通用的，比如说，业务逻辑类型的判断，时间戳的转换，url中字符串的截取等等，这些函数如果在每个需要的页面中都加入的话，不仅加重了当前页面的逻辑复杂程度，还会占用大量原本可以省略的内存。因此，将这些代码整理出来统一管理是很有必要的，在vue项目中，我们都知道模块化和组件化，但vue的框架中还有一个很好用的知识点，就是mixin。 &n... 继续阅读 >
2020
11-29

在Vue中使用CSS3实现内容无缝滚动的示例代码

一、效果预览最近在做一个活动页面，遇到幸运用户中奖的滚动公告需求。下面是实现效果：（gif录制略显卡顿，实际效果很流畅）二、无缝滚动原理1、容器宽高固定，超出内容隐藏；2、内容准备2份，现参与滚动的内容有A、B两份，向左滚动；3、滑动过程中，B份紧随A份之后，营造出无缝滚动回来的效果；4、在A部分内容完全滚出容器的一瞬间，立刻将AB内容位置复原，由于A、B内容一模一样，这个复原过程很难看出来；5、循环第3步；三、代... 继续阅读 >
2020
11-29

vue动态合并单元格并添加小计合计功能示例

vue动态合并单元格并添加小计合计功能示例 1、效果图2、后台返回数据格式（平铺式）3、后台返回数据后，整理所需要展示的属性存储到（items）数组内varobj={"id":curItems[i].id,"feeName":curItems[i].feeName,"projectName":curItems[i].projectName,"projectDetailsName":curItems[i].projectDetailsName,"zbMoney":curItems[i].zbMoney,"qyMoney":curItems[i].qyMoney,"projectId":curItems[i].projectId,"instructions":cu... 继续阅读 >
2020
11-29

vue单元格多列合并的实现

一.多列合并1.在el-table中添加:span-method="objectSpanMethod"属性来控制合并单元格，如下图2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样导致错误的问题objectSpanMethod({row,column,rowIndex,columnIndex}){if(columnIndex===0){if(this.myObj[row.channel_type].start===rowIndex){return{rowspan:this.myObj[row.channel_type].step,colspan:1... 继续阅读 >
2020
11-29

VUE项目实现主题切换的多种方法

需求是做一个深色主题和浅色主题切换的效果方法一多套css这个方法也是最简单，也是最无聊的。<!--中心--><template>动态获取父级class名称，进行一个父级class的多次定义<div:class="className"><divclass="switch"v-on:click="chang()">{{className=="box"?"开灯":"关灯"}}</div></div></template><script>exportdefault{name:"Centre",data(){return{className:"box"};},methods:{//... 继续阅读 >
2020
11-29

Vue项目如何引入bootstrap、elementUI、echarts

引入bootstrap安装依赖包cnpminstallbootstrap--save-devcnpminstalljquery--save-devcnpminstallpopper.js--save-dev全局引入在项目中根目录下的main.js中添加如下代码：import'bootstrap'import$from'jquery'在vue文件中引用<script>import'bootstrap/dist/css/bootstrap.min.css'import'bootstrap/dist/js/bootstrap.min.js'</script>引入elementUI安装elementUI打开终端，输入以下内容npmielement-ui-S全局... 继续阅读 >
2020
11-25

Vue组件生命周期运行原理解析

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。beforeCreate(创建前)在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data，computed等上的方法和数据。created(创建后）实例已经创建完成之后被调用... 继续阅读 >
2020
11-25

vue element-ul实现展开和收起功能的实例代码

vue element-ul实现展开和收起功能的实例代码 实现效果如下： 需求：由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】按钮的时候才显示全部，点击【收起搜索】按钮又收起部分，保留1行。需求分析：由于不太好控制行数，因为不同屏幕尺寸展示的1行的内容并不相同（不考虑移动端），所以考虑用显示高度来控制。解决思路：所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。页面一进来是收起搜索状态，控制搜索区... 继续阅读 >
2020
11-25

在Vue中使用mockjs代码实例

在Vue中使用mockjs代码实例 前言前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。安装npminstallmockjs--save-dev目录结构配置1、api下的config.js：配置axios的拦截处理importaxiosfrom'axios'//创建一个axios实例constservice=axios.create({//请求超时配置timeout:30... 继续阅读 >
2020
11-25

Vue使用Element实现增删改查+打包的步骤

在我们进行项目开发期间，避免不了使用各式各样的组件，Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。效果：组件使用我们利用vue-cli创建一个项目，然后只需要安装element-ui即可安装：npmielement-ui-S然后在main.js中引用一下样式即可，可以选择按需加载，我们这边因为是演示一下，所以不去进行调整，项目中如果使用到的组件不多，可以选择按需加载。main.jsimportVuefrom'vue';importAppfrom'./... 继续阅读 >
2020
11-25

浅析VUE防抖与节流

防抖和节流到底是啥函数防抖（debounce）解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。functiondebounce(fn,wait){lettimeout=nullreturnfunction(){if(timeout!==null)clearTimeout... 继续阅读 >