是日前端

【代码】后端返回JSON数据格式，前端根据JSON数据 导出.CSV文件。

需求：系统中提示多个弹框不能同时出现，一次只弹出一个弹框新建resetMessage.js/** 防止重复点击重复弹出message弹框 **/import { Message } from 'element-ui';const resetMessage = (options) => { if (document.getElementsByClassName('el-message').length){ Message.closeAll() } Message(optio

需求：鼠标滑过某行，当前行的图标变化效果：鼠标滑过某行后P.s.：深拷贝这块内容有待完善<el-table ref="table" class="table" :data="tableData" border :height="tableHeight" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" stripe @cell-mouse-enter="cel

前后端交互模式接口调用方式原生ajax基于jQuer的ajaxfetchaxiosPromise用法

需求：1、当表格数据未查看到最后一条时，分页固定在页面最下方，直到查看表格最后一行，分页取消固定；2、当表格滑动到上方，表头固定在系统的上方思路：1、当鼠标滑动时判断表格距离浏览器上方的距离，当距离小于系统头部时，表头固定，反之取消固定， 获取滑轮滚动事件也可以使用@Wheel，也可以使用window.addEventListener监听滑动2、表头固定的方式有三种：方法一：给el-table的height赋值，获取表格中滚动条滚动到最后一行，始终差着点值，不知道什么原因，考虑不周，想加.

不知不觉中发现，距离第一次20年2月在“是日前端”上发表文章，已经有将近2年的时间了，由于种种原因吧，学习总结更新的不是很频繁，更多的是个人工作中使用时候踩的一些坑和常用的总结吧，但是也积累了近10万的浏览量，竟然有了100个粉丝，当上周快结束的时候，惊喜的发现有了98个粉丝时，我心里就暗暗下了决定，当到了100个粉丝时，我也创建一个交流群，今早一看这不就100个粉丝了，非常感谢大家喜欢我的分享，如果大家想一起交流学习，共同进步，欢迎扫码进“是日前端交流群”，进群可以改下备注，地区_昵称，群里请勿发广告，

需求：调用后台接口时如果调用响应失败，重复请求10次，如果还是不成功则跳转到错误页面提示用户http.jsimport axios from 'axios' // 引入axiosimport router from '@/router'// 设置axios请求urlaxios.defaults.baseURL = window.config.baseURL// 设置重新请求次数axios.defaults.retry = 10;// 设置请求延时axios.defaults.ret.

上传文件核心代码<el-upload class="upload-demo" action="uploadFileUrl" ref="upload" multiple :show-file-list=false :on-change="handleFileChange" :before-upload="beforeUpload"> <el-button type="primary" size="mini">上传</el-butt

早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程一、概念递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理：函数递归：函数利用函数名还调用自己组件递归：所以组件递归利用的是vue组件中的name属性来实现的二、需求实现可折叠动态渲染多级侧边栏导航三、分析1、观察到侧边栏导航是一级一级的，第二.

需求类似这样的：使用普通table实现，样式需要自己设置：<table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &

首先html里设置table的高度<el-table ref="recordTable" :data="tableData" border :height="tableHeight"><el-table>data(){ return { tableHeight: 50 //默认初始值 }}根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，70表示表格距离浏览器的高度mounted(){ this.$nextTick(() =>{

由于需要使用滚动条，原生滚动条长的太丑，查到了elementUI中的滚动条el-scrollbar，使用简洁方便，样式如下：使用方法如下：外部的div必须给固定高度才行<!-- 外部div --><div style="height: 650px; display: flex" class="cab" > <el-scrollbar style="height:100%"> <!-- 内部div --> &l

一般$root获取根节点的方式不推荐在src目录下新建一个global文件夹，创建一个index.js文件，将需要使用的变量定义在里面const keyOn = falseexport default { keyOn}在其他js或vue组件中引用时，导入进去使用时注意是个对象，里面的值是属性import global from '@/global'global.keyOn = true...

一、JSMpeg简介JSMpeg是用JavaScript编写的视频播放器。它由MPEG-TS Demuxer，WebAssembly MPEG1视频和MP2音频解码器，WebGL和Canvas2D渲染器以及WebAudio声音输出组成。JSMpeg可以通过Ajax加载静态文件，并可以通过WebSockets进行低延迟的流传输（〜50ms）。JSMpeg可以在iPhone 5S上以30fps的速度解码720p视频，可以在任何现代浏览器（Chrome，Firefox，Safari和Edge）中使用，并且压缩

组件化开发直观地将一个复杂的页面分割成若干个独立的组件，每个组件都包含自己的逻辑和样式（html、css、js），再将这些组件自由组合起来形成完整的界面。个人感觉组件化很符合编程的思想，能重复多次使用的就封装起来，提高代码的可维护性组件化开发的好处提高开发效率方便重复使用便于协同开发更容易被管理和维护组件分类按功能分页面级组件：一个页面就是一个组件基础组件：将可复用的部分抽离出来，形成基础组件按用法分全局组件：可以声明一次在任何地方使用，一般写插件或者是使用很频繁时候

一、JS数据类型基本数据类型：number string boolean null undefinedObject func…Symbol ( es6 )二、操作数组数组的变异能改变原数组的：pop push unshift shift splice reverse sort不能改变原数组的：indexOf lastIndexof concat slice常用方法：es5：forEach filter(过滤) map(映射) some every reducees6：incl

前端小白简单总结，参考黑马珠峰等课程以及其他内容整合，还望各位大佬多多指教~一、axios的使用axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSR.

官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)

<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem

安装momentnpm install moment全局使用main.js中引入import moment from 'moment'注册组件Vue.prototype.$moment = momentVue组件中使用dateFormat(row, column){ var date = row[column.property]; if (date == undefined) { return ""; } return t

先说这次的需求，需要在一个vue页面中的一部分实现预览pdf功能一、全屏预览模式先说直接全屏预览的，直接axios获取到数据，将流转为二进制文件，可以window.open也可以嵌入到a标签的href属性中二、利用pdf.js嵌入到iframe中预览第一步跟全屏一样，就是最后打开方式不一样pdf.js官网下载pdf.js文件将文件解压缩，将里面的build和web文件夹放在static目录下面，一定要是static目录目录结构如下接着在组件里就可以直接使用了，iframe的原理是

el-tabs选项卡必须要有一个默认选中项，value或v-model

一、登录和退出功能登录状态保存问题：当前端与后端接口之间存在跨域问题，推荐使用Token，反之，推荐使用Session或CookieToken原理

先搁着吧，抽空研究总结一下，先把这段高度调节利用防抖的代码贴上<template> <div id="functions" :style="defaultHeight"> </div></template><script> export default { name: "index.vue", components: { NavHeader: ()=>import('

最终效果：代码如下：<div class="timeline body-bgcolor"> <!--时间线--> <div class="timeline-title"> <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span> </div>

实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { tooltip: { formatter: '{a} <br/>{b} : {c}%' }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [

实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { legend: { icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none itemWidth: 10, // 设置宽度 itemHeigh

实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999'

一、使用echarts前准备1、安装echarts控制台输入安装echartsnpm install echarts --save2、vue main.js中注册import echarts from 'echarts' //引入echarts二、Vue组件中使用1、先找一个要放置图表的dom节点<template> <div class="hygrometer" ref="hygrometer"></div></template>

感谢大佬提供思路，稍加修改实现了需求<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script></head><body><

控制台输入安装echarts以及水球图npm install echarts --savenpm install echarts-liquidfill --savevue main.js中注册import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'组件中使用<template> <div class="hygrometer" ref="hygrometer"></div>

一、Websocket简介Websocket是一个持久化的网络通信协议，可以在单个TCP连接啥功能进行全双工通信，客户端和服务端没有了Request和Response的概念，地位平等，一旦连接建立，客户端和服务端之间可以实时进行双向数据传输。...

一、创建vue项目（Vue-cli脚手架）可以看Vue环境搭建（Vue-cli脚手架）二、安装echarts在项目目录中打开terminal命令行输入npm install echarts安装element-uinpm i element-ui -S字体颜色渐变background-image: -webkit-linear-gradient(top, #88b6d8 0%, #d3e4f1 100%);-webkit-background-clip: text;-webkit-text

由于刚开始用，不完善的后面想到会继续补充一、项目基本结构如下图是借的，使用Vue cli脚手架搭建可查看文章：Vue环境搭建（Vue-cli脚手架）二、build：构建编译脚本目录三、config：构建配置目录四、src：source目录(非常重要，核心代码都在里面)五、components目录(组件目录)六、package：非公共，单独的组件目录...

目前发现this.$refs[formName].resetFields();有以下几种情况可能会导致失效：1、表单必须加上ref属性，如：2、需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致，如3、重置的数据不是清空，而是重置为初始值...

一、Vue的基本使用及模板语法1、Vue简介    1.1 Vue是一套用于构建用户界面的渐进式框架：声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建    1.2 优点：易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM2、Vue的基本使用 &

前端小白简单总结，还望各位大佬多多指教~一、Vue环境搭建（Vue-cli脚手架）1、你要安装nodejs；安装nodejs可以看：2、安装Vue-cli脚手架Vue-cli是官方的快速构建这个单页应用的脚手架。npm install -g vue-cli3、创建一个工作目录，用来存放你的vue的项目4、打开控制台，进入到你的工作目录中，选择webpack模板初始化项目 // vue_demo，是你的项目名，不能有大写字母 vue init webpack vue_demo 5.

前端小白简单总结，还望各位大佬多多指教~之前刚开始看Vuex时候，有点晕，又仔细研究了一下，明白了，以下是个人的简单总结，仅供参考Vuex是什么Vuex 是一种状态管理模式，把应用中所有组件的状态都集中存储在store里，统一管理。单向数据流：数据变化导致页面发生变化Vuex的流程图整个流程大致如下：用户和vue组件发生交互触发了actions，actions传递state并提交（调用）mutations，mutations对state进行一系列逻辑处理得到新的state，因为stat.

父传子：通过props属性1、直接传递值2、传递对象的方式例子：父组件：app.vue：<template> <div id="app"> <HelloWorld/> <Test weather="晴天" :day="today" :time="time"/> </div></template><script> import HelloWorld from "./component

Vue生命周期钩子函数大致分为三个阶段：1、初始化阶段：beforeCreate（组件创建前）：data和methods中的数据还未被初始化created（组件创建结束）：data和methods中的数据已经完成初始化beforeMount（组件挂载前）：模板编译完成，但还未渲染挂载到页面mounted（组件挂载结束）：渲染完成，挂载到页面2、运行阶段：触发条件：当数据发生变化时beforeUpdate（页面更新前）：数据已更新，页面中的数据还未更新updat