由于Vue属于MVVM框架,数据双向绑定视图,对data对象中的数据进行监听,当监测到数据改变时,相应数据所影响的页面也会触发更新。因此我们所需的这些响应式数据,受到JavaScript的限制,vue不能监测到对象属性的添加和删除,因为Vue利用的是Object的defineProperty()方法,在初始化实例时将属性转为getter/setter,所以属性必须在data对象上才能被vue转换。 Vue在这种情况下给我们提供了$set这种响应方式去操作页面更新。 数组 dataSource:[{ analyst:…

2021年9月17日 0条评论 4点热度 阅读全文

在做vue项目的时候难免会用到循环,可是但我们后台数据返回多条记录而且是多层嵌套关系的时候,我们需要获取当前第几次循环此时就会出现问题。 下面给大家介绍两种方式,第一种是基于数学公式:第一次循环*(第二次循环总长度)+1+第二次循环  可以获取当前第几次循环 第二种方法:是在方法中进行计算返回当前下标。废话不多说先看一下效果吧 具体代码如下: 测试数据json字符串: parentList: [{ childList: [{ index: 1, childName: "第一个节点" }, { index:…

2021年9月16日 0条评论 5点热度 阅读全文

前言:最近小编也是刚跳槽新的公司一个月,前端技术栈是vue+element也是市面上比较常用的框架之一了,同时也花费一点时间总结一下最近的坑,react转vue的一个过程确实是有些心累的,其主要原因还是写法的不同吧。 需求: 最近接到一个前端实现页面的筛选搜索功能,是多条件的;那就分析一下需求的小思路,怎么去实现这样的一个过程。 1.请求拿数据,后端是一次性全部扔给前端了。(问题点,前端筛选要不要实时发请求拿数据,依据需求而定) 2.点击测试账号显示所有数据(默认是没有测试账号的数据),取消不显示测试账号 3.出席…

2021年9月6日 0条评论 5点热度 阅读全文

​ 好久没有写文了,今天突发奇想就来记录一下,这段时间学习到的一些小的知识点。 ​ 最近做项目要使用elementui里的table组件,所实现的也要比较"花里胡哨",下面就说说,el-table组件的一些高级一点的使用了。 el-table-column type=selection 要求:在el-table的表格中,第一列为选择列,第一行选择框旁要加上全选的字样。 实现思路:官网介绍里,有type=selection会实现第一列为选择列的需求,但其第一行没有文本显示,需要使用css的伪类进行文本修饰。 实现代码…

2021年8月13日 0条评论 3点热度 阅读全文

table表格全选反选 AntDVue 子组件template 子组件js 父组件template 父组件js 效果如下 AntDVue 公司前端用 Ant Design of Vue为样式。 业务需求如下: table表格实现全选反选 主要组件讲解: 会用到如下table组件,row-selection还请仔细阅读官方文档 子组件template 简易table表格封装 <a-table bordered :row-class-name="rowClass" :loading="loading" :pagi…

2021年8月12日 0条评论 3点热度 阅读全文

在vue框架中防止用户重复提交表单的方法 在互联网应用中有效地阻止用户重复点击操作可以极大地提高系统的安全性和稳定性。为此,好友封装了一个专门用于提交表单和下载文件的按钮组件,为方便描述姑且称之为“防抖按钮”。 “防抖按钮”的实现原理简单来说,当用户点击按钮提交表单或下载文件之后,当前按钮将处于禁用状态,等待服务器响应结束后,恢复该按钮的可用状态。 在当前流行的vue框架中,实现其功能的具体方法是在父组件中引入“防抖按钮”,并在“防抖按钮”的:click属性中设置发送请求的方法。当“防抖按钮”被点击后,“防抖按钮”…

2021年8月6日 0条评论 0点热度 阅读全文

前言 当被问到Vue是如何实现数据的双向绑定,大部分人的回答是:其内部是通过Object.definedProperty()的get和set方法实现的。其核心原理是通过这个API实现,但是还是有必要理解整个过程的实现和其运行原理。 什么是MVVM模式 MVVM模式是Model-View-ViewModel的简写,即模型-视图-视图模型。【模型】指的是数据层。【视图】指的是视图层所看到的页面。【视图模型】MVVM模式的核心,它是连接view和model的桥梁。 数据层和视图层直接是不能直接通信的,那么模型(数据层)如…

2021年7月25日 0条评论 12点热度 阅读全文

props 验证 验证传入的 props 参数的数据规格,如果不符合数据规格,Vue 会发出警告。 能判断的所有种类(也就是 type 值)有: String, Number, Boolean, Function, Object, Array, Symbol Vue.component("example", { props: { // 基础类型检测, null代表任何类型都行 propA: Number, // 多种类型 propB: [String, Number], // 必传且是String propC: {…

2021年5月28日 0条评论 8点热度 阅读全文

对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽、捷报频传~ 但是在前几天却遭遇了一个意外,我在mounted中获取后台数据并更新data,在template中把data.fullname与一个p元素的innerHTML绑定,这是一个简单到不能再简单,普通到不能更普通的操作,打开浏览器一看,完美!fullname的数据正常显示在p元素中,没有任何问题,可是……咦,控制台怎么报错…

2021年5月28日 0条评论 0点热度 阅读全文

在使用element-ui中的Upload组件时, 当我们需要手动修改fileList的时候会报错如下: 其实这是element组件告诉我们不能直接修改fileList的值。网上有罗列出几种方法来阻止组件的原生事件,实际上这些方法在指定上传文件可多选时是不可取的。这里我通过自己的踩坑,得出一下完美解决方案: 1.在data里面定义再一个变量uploadList用于操作fileList 这里我们定义的uploadList可用于更改fileList的值,并且传回给父组件或者做其他事情 2.上传成功回调里面给upload…

2021年4月21日 0条评论 32点热度 阅读全文