- 博客(37)
- 收藏
- 关注
RSS订阅原创 echarts手动关闭tooltip
在vue项目中用到echarts的自定义tooltip，需求需要手动关闭tooltip框tooltip: { show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。 trigger: 'item', //触发类型。item,axis,none enterable: true,//鼠标是否可进入提示框浮层中，默认为false， showContent: true, //是否显示提示框浮层 triggerOn: 'click'
2022-03-16 14:52:24
9023
3
转载 解决“Uncaught (in promise) Error: Navigation cancelled from “/“ to “/login“ with a new navigation“报错处理
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。解决方法如下:在路由器中进行配置：router/index.jsimport Vue from 'vue'import Router from 'vue-router' Vue.use(Router)// 解决报错const originalPush = Router.prototype.pushconst origi
2021-01-18 11:26:11
8710
3
原创 vue-router路由跳转和传参
一.router-link（声明式）1.不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数<router-link :to="{name:'home', params: {id:1}}"><router-link :to="{path:'
2020-11-03 17:50:18
749
原创 element-UI级联选择器获取label值
1. element ui 2.9.2版本之前2.9.2之前this.$refs[‘cascader’].currentLabels2. element ui 2.9.2版本之后2.9.2之后this.$refs[‘cascader’].getCheckedNodes()[0].pathLabels
2020-07-16 14:31:50
3362
原创 vue element ui在form表单中校验upload组件是否上传
思路：给 el-form-item 加上ref属性，在上传成功钩子函数中取消该项的表单校验<el-form-item label="附件：" prop="file_id" ref="file_Rule"> //给该项加ref <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleSuccess" :file-
2020-07-15 16:26:10
2770
4
原创 vue+elementui 实现带分页多选表格记忆之前的选项
1.官方提供的reserve-selection属性，为true时可保留之前选中的数据（需要指定row-key） <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys"> //指定row-key
2020-07-07 17:21:55
2056
原创 vue+elementui实现动态多级表头+合并单元格+自适应列宽
1.动态多级表头的实现因为项目需求是要根据不同查询条件，显示不同的表头，所以需要动态渲染表头在表格渲染的时候，label和prop要对应起来，简单一点的办法就是让后端传过来，这是我给后端提供的格式title:[ {label:'一级标题1',item:[ //label为表头的内容，prop为对应的字段名（注意字段名要和后端传过来的数据列表的字段名一致） {label:'二级标题1',item:[ {label:'三级标题1',prop:'value1'}, {label
2020-06-16 17:58:39
5339
3
原创 vue+elementui实现可编辑表格
项目需求表格的内容显示和修改框切换显示如图所示，点击修改按钮切换到输入框和选择框点击前：点击后：1.首先先定义一个变量用来控制span和input的显示隐藏，因为点击按钮只能修改该行数据，所以要给每行一个index作为标识tem<el-table-columnprop="rect.charge"header-align="center"align="center":s...
2019-12-17 15:27:32
4732
原创 vue+elementui实现批量删除
在el-table中手动添加一个el-table-column，设type属性为selection即可tem<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelect...
2019-12-16 18:04:33
2182
1
原创 开启flex布局，margin会撑大盒子
父盒子开启flex布局，两个自盒子为flex:1但是给左边盒子加了margin-right:10px之后会把父盒子撑大10px解决办法：给自盒子加上 width:0;搞定~大家有好的方法欢迎留言...
2019-12-16 17:49:04
2206
原创 elementui展开行踩过的坑
前端小白，此文仅为自己见解项目需求使用展开行实现表格嵌套，且要根据当前点击的行来动态获取展开行中的数据总结一下踩过的坑：1.展开行中的表格data绑定的必须是外层表格中的数据的子项，否则会出现第一次点击展开嵌套表格不显示，点击两次才会显示的bugexport default { data(){ return{ tableData:[{ ...
2019-12-16 09:44:22
3295
3
原创 vue中使用element-ui自定义表单验证
template<el-form ref="dataform" :rules="rules" :model="dataform" label-width="300px"> <el-form-item label="电话" prop="phone"> <el-input class="inp" v-model="dataform.phone" auto-...
2019-12-06 09:44:41
390
原创 vue项目中使用vue-full-calendar日历插件
项目需求需要用到日历插件，踩了许多坑，特此记录一下，避免以后踩坑首先注意需要安装的插件是：vue-full-calendar 而不是 vue-fullcalendar，两者具体的配置项是不同的安装： npm i vue-full-calendar安装成功之后在需要的页面引入import { FullCalendar } from 'vue-full-calendar'componen...
2019-11-28 11:32:07
5049
2
原创 vue中bus中央事件总线的使用
在项目中我需要调用不相关组件的方法，使用了bus作为一个中介使用方法很简单1.先创建一个bus.js文件，内容如下import Vue from 'vue'export const Bus = new Vue()2.在需要用到的A、B两个组件中引入import { Bus } from 'bus.js'3.在A组件中定义要调用B事件的bus事件名Bus.$emit('refr...
2019-11-19 17:29:49
784
原创 防止用户多次点击造成的多次请求
我们在访问有的网站，输入表单完成以后，单击提交按钮进行提交以后，提交按钮就会变为灰色，用户不能再单击第二次，直到重新加载页面或者跳转。这样，可以一定程度上防止用户重复提交导致应用程序上逻辑错误。1> 定义标志位：点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。2> 卸载及重载绑定事件...
2019-11-13 14:17:42
772
转载 element模态框dialog中的select组件中选中无反应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...
2019-11-13 13:24:18
785
原创 当页面路径一样 参数不同时 页面不会刷新问题
vue项目中点击跳转后，点击浏览器的返回按钮，再点击跳转并传入不同的参数，页面数据不会刷新解决方法简单粗暴，加一个监听器即可watch: { '$route.query' () {//'$route.query' 这个函数是关键 Object.assign(this.$data, this.$options.data())//将跳转前的数据置空 this.ini...
2019-11-08 15:40:02
577
原创 vuex的使用
1.在项目中安装vuex依赖npm install vuex --save安装成功2.创建文件在项目的src目录下新建一个文件夹store，在该文件夹下新建一个index.js文件3.创建vuex实例在index.js文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store代码如下：import Vue...
2019-08-31 17:57:05
83
原创 git使用文档
Git什么是Git?Git是一款源代码管理工具(版本控制工具)我们写的代码需要使用Git进行管理。1.0是稳定2.0加了新功能源代码有必要管理起吗？有必要，因为人工的去处理不同的版本，做相应备份会很麻烦。svn,vss,vcs,tfs…-Git是linux之父当年为了维护linux—linus之前也是手动维护合并把文件发给LinusBitKeeper(收费)有人想破...
2019-08-23 11:08:57
95
转载 vue-cli3.0切换环境对应的api接口
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 ...
2019-08-23 10:55:46
1052
转载 es6属性基础教学
摘要：看完此文包会es6，不会我吃翔ES6基础智商划重点在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。ES6彻底改变了前端的编码风格，可以说对于前端的影响非常巨大。值得高兴的是，如果你熟悉ES5，学习ES6并不需要花费太多的时间就可以掌握，因为常用的基础语法并不多，花少量的时间，就可以开始我们的ES6之旅了。这篇文章不会详...
2019-08-23 10:52:30
126
原创 H5和Html5的关系
“H5是Html5的缩写”，这恐怕是很多人的一个错误认知。事实上，二者并不是一个意思。H5确实涉及HTML5诸多规范，想做H5页面或多或少都要利用到HTML5很多内容。但二者只是有联系，并非对等。2015年上半年，随着H5的火爆，同时也引起了技术阵营与营销阵营的定义争锋，当时在互联网上两方大打口水之战，对定义展开了一场博弈，结果虽然是技术阵营妥协，但也有利的证明了HTML5和H5根本不是一个层...
2019-08-23 10:35:58
2459
原创 处理项目中ESlint语法报错问题
1.在项目根目录中创建.prettierrc文件这是一个json格式的配置文件2.在文件中做一些配置{ "semi": false, //格式化代码后，不会额外加分号 "singleQuote": true //用单引号替换双引号}...
2019-08-20 09:41:08
675
原创 登录功能的实现和token的使用
1.登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后，根据后台的响应状态跳到项目主页2.登录业务的相关技术点http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态如果前端与服务器之间不存在跨域问题，推荐使用cookie和session记录状态，如果前端与服务器之间存在跨域问题，推荐使用tok...
2019-08-20 09:34:12
4683
转载 Vue.component(封装一个全局组件-弹窗)
1.首先创建一个vue文件，然后写好自己想要全局使用的组件，当然组件的复用性和拓展性要足够高，弹窗的话一般需要自定义的有标题 背景色 等等<template> <transition name="fade"> <div class="v-alert g-center" :style="{zIndex}"> ...
2019-08-19 17:07:56
4367
1
原创 scoped css
作用域CSS当<style>标记具有该scoped属性时，其CSS将仅应用于当前组件的元素。这类似于Shadow DOM中的样式封装。它有一些警告，但不需要任何polyfill。通过使用PostCSS转换以下内容来实现：<style scoped>.example { color: red;}</style><template> ...
2019-08-19 11:13:03
337
原创 对webpack、git、github、npm的理解
对webpack的理解webpack它是代码编译工具，有入口，出口、loader和插件。其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。构建、打包、编译他们都是为了提高开发效率，让前端朝着标准化的路上继续迈进git常用命令git的全部工作都是在这三个区之间工作。三个区是工作区，暂存区、远程仓库区。建立一个git仓库：git i...
2019-08-19 10:39:30
1277
转载 Vue中使用webSocket
<template> <div class="test"> </div></template><script>export default { name : 'test', data() { return { websock: null, } }...
2019-08-19 10:23:14
404
转载 Vue中使用filter格式化当前时间
<div id="app"> <div>{{time|format('yyyy-MM-dd hh:mm:ss')}}</div> </div> Vue.filter('format', function(value, arg) { function dateFormat(date, forma...
2019-08-15 11:31:03
840
转载 git commit -a命令时，遇到LF will be replaced by CRLF in...提示的解决办法
问题如下：$ git commit -a -m "用户模块"warning: LF will be replaced by CRLF in src/plugins/element.js.The file will have its original line endings in your working directory出现这个提示并不影响后续的操作，可以忽略此提示。也可以输入如下命...
2019-08-15 11:23:20
300
转载 vue数组和对象响应式数据处理
做项目时踩到的坑，在前端通过axios.get向后台请求数据，通过params传递一个对象，当通过this.getUserparams.pagesize=val直接修改传递对象的值时，发现后台请求的数据没有发生改变，此时修改的数据并不是响应式的数据。要修改对象或者数组中的值并想要进行响应式处理的时候需要通过set方法进行修改：Vue.set(this.getUserparams, 'pages...
2019-08-15 11:22:24
862
转载 cookie，session和localStorage，sessionStorage的区别
cookie和session浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie和session跟服务端进行数据交互。cookie和session都是用来跟踪浏览器用户身份的会话方式cookie和session的区别1.使用方式cookie机制：如果不在浏览器中设置过期事件，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话co...
2019-08-15 11:21:09
95
原创 PHP\mySQL\Ajax整理
PHP\mySQL\Ajax整理PHP相关1.0 网络相关知识服务器：远程计算机，用来存储项目，需要部署软件和关于前后端及数据库的一些服务ip地址：每一个服务器都会有一个绝对的地址，由4个0-255的号段组成端口：默认端口为80，https为443，数据库为3306域名：需要购买，方便记忆，需要通过DNS服务商进行解析成对应IP地址url：一段完整的包含协议、域名、端口、文件和键值...
2019-08-15 11:18:32
491
原创 jQuery元素操作
元素的操作： 创建元素： $(“html字符串”) 父元素对象.html(“html字符串”) 父元素对象.append($(“html字符串”)) 添加元素： append appendTo prepend prependTo after insertAfter before insertBefore 清空/删除元素： remove(...
2019-08-15 11:18:22
134
原创 jQuery基本用法
jQuery： jQuery就是一个工具，它对获取对象和操作对象进行了封装，提供了非常简单的解决方案。jQuery对象和js原生对象的区别： jQuery可以使用jQuery封装的各种便利的方法。$(js原生对象) jquery对象.get(0) jquery对象[0]获取对象： 利用css的选择器获取对象： 基本选择器： #id .class 标签...
2019-08-15 11:17:51
231
原创 Web API
学习目标:掌握API和Web API的概念掌握常见浏览器提供的API的调用方式能通过Web API开发常见的页面交互功能能够利用搜索引擎解决问题typora-copy-images-to: mediaWeb APIWeb API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用...
2019-08-15 11:17:18
274
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人