随笔分类 - vue-element-admin
目前学习vue2.0,一起进步，慢慢进阶3.0
vue防止重复提交数据-防抖功能
摘要：首先明确下我们想要实现的效果。 1.用户在按下按钮的时候立即触发点击事件。2.用户在快速连续按下按钮的时候只触发第一次的点击事件。3.用户不间断疯狂点击按钮（暴力测试），也只是立即触发第一次的事件，在疯狂点击的过程中不会触发事件，即使超时时间已经过去。 解决方案 lodash，这里不展开分析这个库，
阅读全文
Vue — 详解mixins混入使用
摘要：前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性 一、什么是Mi
阅读全文
vue项目实现每隔1分钟刷新当前页面(附:清除定时器优化方案)
摘要：有个需求是: 需要实时获取接口数据,每隔1分钟获取一次, 我们可以通过定时刷新页面来达到效果. js有两种定时器 setInterval(function(){}, milliseconds)——会不停的调用函数 setTimeout(function(){}, milliseconds)——只执行
阅读全文
vue-element-admin框架中elementUI的select下拉列表设置默认值
摘要：官网elementUI中的下拉组件select是不带默认值的，如何使其默认加载，可参考如下方案。 做了一个组件，可公用调用。 先看下效果 主要涉及就是父组件传子组件，及子组件回传父组件的传值操作。 下拉组件代码： <template> <el-select v-model="dataValue" s
阅读全文
vue-element-admin 三级路由
摘要：三级路由的设置非常简单，不过不知道其原理就会不知道是如何设置的。 vue-element-admin自带的有嵌套路由，不过他的嵌套路由有一个套路，那就是二级路由页面下有个<router-view />标签 <template> <router-view /> </template> 这里说一下，这里
阅读全文
关于VUE跨域代理访问WebApi接口-开发环境
摘要：应用VUE踩的最大的坑，模拟实现前后端分离，即如何应用VUE前端调用后端服务接口。 应用环境（vscode） 1． vue-cli (2.x)，最新版本3.0，以后会升级。 / /如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装 npm uninstall vue-cli -g # OR
阅读全文
在vue项目中引用element-ui时 让el-input 获取焦点的方法
摘要：Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下： 在网上查找了很多方法， 但是在实际使用中发现了一个问题无论是使用$ref获取input元素然后使用focus方法: if (colu
阅读全文
element-ui实现单元格点击可编辑
摘要：要实现表格填报功能，后台存储的是表格的数据结构，从后端获取json数组后，传给页面展示 页面采用cell-click时通过控制 flag值来确定时显示内容还是 input框 <el-table :data="tableData" border @cell-click="cellDblClick">
阅读全文
VUE elementUI Table 使用span-method（实现多列行合并）
摘要：首先看下实现效果 官方例子 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex 0) {//哪一列可以合并（第一列） if (rowIndex % 2 0) {//满足合并行的条件（偶数行） retur
阅读全文
vue前端格式化abpvnext返回的日期格式
摘要：abpvnext动态webapi返回的json数据中，日期时间带T还有毫秒数的问题，网上有各种方法基本上全是在后端时行处理， 但有时，设置后有时会随着abpvnext的版本升级又转不了。 如果前端用的是 vue-element-admin 可以不需要后端进行任何转化，vue前端下载一个日期转化组件就
阅读全文
安装VSCode运行VUE开发环境
摘要：1. 下载VSCode,官网直接下载就行：https://code.visualstudio.com/Download。 2. 汉化VSCode Ctrl+Shift+P 输入 "configure display language" 然后点击确定后，修改locale.json文件下的属性"loca
阅读全文
搭建VUE开发环境
摘要：了解下VUE搭建环境，可以更好地学习VUE。 三步： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 1．安装node.js 在搭建vue的开发环境之前，一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可
阅读全文
