- 博客(42)
- 收藏
- 关注
RSS订阅原创 前端下载二进制流的表格
//导出数据 onExportClick() { this.exportLoading = true let param = { guid: '1236' } exportToExcel(param).then(res => { //接口 this.downloadFile(res, '表格.xlsx') this.exportLoading = false }) },...
2021-03-26 17:16:15
227
1
原创 element 表格两级单元格合并功能
代码如下<template> <div class="GlobalSituation"> <el-table class="control-table master-table" :data="tableList.tableData" style="width: 100%;" border :span-method="spanMethod" :row-class-name="tableRowClassName"> <el-table-co.
2021-03-24 17:53:31
288
原创 element 树型结构表格的合并问题
完成以上的树型结果的表格，需要掌握以下几点。首先，我们先看比较简单，总价单元格的合并的问题，这里总价是合并了两列。他实际上其实就是用到element 中的show-summary 同时定义了table中的refs实际上就是获取到了表格的元素，然后获取到table底部，进行合并。其实，我们要做的第二个比较简单，就是如何让树型表格禁用收缩功能，element自带的方法，让他每一次点击都处于展开的状态最后，就是树型合并的问题，子级的层级不确定数，所以我们需要用到递归的方法<!-- 公共S.
2021-03-23 18:10:48
1567
原创 安装React Tools工具的流程
第一步，打开https://github.com/facebook/react-devtools第二步，切换分支，从master分支切换到v3分支第三步，下载该代码，git clone https://github.com/facebook/react-devtools.git第四步，下拉后，进行安装依赖包，npm install (此时你最好要确保你的源是淘宝源，npm config set registry https://registry.npm.taobao.org)第五步，安装成功后，执
2020-12-07 15:25:12
1338
原创 vue中锚点的实现
大概要实现的模型就是这样的。那首先，我们先完成第一步，滚动条滚动到相应的锚点列表对象中。<div ref="scrollPanel" class="container" @scroll="onScroll"></div>data(){return{isRun:false, //判断是否是锚点点击跳转还是滚动条自动移动。是锚点点击的是就truetimeout:null,triggerTop: 50,// 触发更新value时距离顶部的距离 pxisShowTabs:.
2020-10-19 15:47:09
1081
原创 React第一步：安装
作为一名刚出来的应届生，若想在以后前端路上越走越高的话，就必须得不断广泛去学习前端代码，前期是广泛学习，中期深入理解，后期掌握思想。react的安装第一步：安装react-appnpm install -g create-react-app第二步：创建文件名my-appcreate-react-app my-app第三步：进入到my-app目录cd my-app第四步：运行环境npm start在运行第二步的时候，有时候会出现一些问题，因为React他对node的版本的有一定的要求。
2020-07-24 13:43:04
152
原创 正则表达式的使用与判断
正则表达式。首先出现在我们面前的这五个字，我们要对他有个印象。正则表达式表示检查是否有某个字串，将你找到的字串进行配对或者替换等正则表达式格式是：/内容/ 以两条斜线表示的是正则表达式前两天，小编遇到了一个需求，就是在导入表格的时候，需要把x坐标中的开头38两个数字给去掉。一开始小编的写法是watch:{//导入的表格的数据dataList(val){val.forEach(function(value,index)=>{if(value.x.trim().slice(0,2)===
2020-07-17 19:09:44
1334
原创 vue中根据某一个值的改变而动态改变样式
最近有一个需求，动态改变宽度。缩小就变420px，放大宽度就应该占满整个屏幕，第一步，在div那里定义一个ref的值第二步，计算屏幕的宽度第三步，监听数的改变，从而改变样式4.完美，收工。...
2020-07-03 17:28:53
4047
原创 element表格中根据窗口自适应高度
1.表格自适应高度，有两种方法，方法一：外部div定死一个高度，里面的table的高度定位百分比，也就是基于最外层的div的高度的百分比。缺点是：只能适应本电脑分辨率或者小于本电脑的分辨率，大于本电脑的分辨率，就会出现不一样的效果。方法二（推荐）使用window.innerHeight来计算高度。紧接着就 ，以及减去其他的高度乘以根字体的大小再除于100优点是兼容高低分辨率方法一<div class="container"><el-table height="90%">
2020-07-03 17:21:54
1162
原创 es5中类的继承方法
1.es5中的类构造方法与原型链的构造function person(){this.name='张三'this.age=14var run=function(){ //构造方法alert(this.name+'在运动')}}//原型链person.prototype.work=function(){alert(this.name+'在工作')}var p=new person()p.run() //弹出张三在运动alert(p.age) //弹出18p.work()
2020-06-11 15:05:20
230
原创 typescript的函数完整版
//es5的函数用法function add(){return 123}//匿名函数的表达var a=function(){return 345}ts中的函数表达有以下几种// ts中函数的声明方法 字符串，number，object,any等，与数据类型的思路一致function add2():string{return '我是返回字符串的函数。其他数据类型不能放在我这里'}//函数声明，类型为字符串var arr=[{a:1},{b:2},{c:3}]function o
2020-06-11 11:09:49
128
原创 关于typescript的数据类型的那一些事~
以下介绍typeScript的几种数据类型，分别是Boolean，number，string，array，object，any1.ts中boolean的使用var boolean:Booleanboolean=trueconsole.log(boolean) //trueboolean=falseconsole.log(boolean) //falseboolean='123' //错误的写法，变量boolean定义为Boolean类型了，所以赋值只能是true或者false2.ts中nu
2020-06-10 16:41:49
455
1
原创 TypeScript的安装与搭建
小编这两天有点闲，在上班期间做好任务后，偷空学习了一下TypeScript。本篇章简单介绍两个知识点。1.TypeScript与JavaScript的区别2.TypeScript的安装3.TypeScript项目的搭建。小编也是学习之中，若有什么理解大家觉得有偏误的，欢迎与我沟通~1.TypeScript可以说是JavaScript的升级版，超集版。JavaScript是弱类型语言，变量的定义比较广泛，但就是他的广泛，导致了维护起来没有TypeScript那么好，TypeScript是一种强类型语
2020-06-10 15:30:06
492
原创 v-if与v-for的不共用问题
v-for的优先级比v-if高，所以会优先执行v-for如果你需要v-if与v-for共用的话，需要把v-if放在容器上<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li></ul>这一段代码中，会先去循环v-for，循环后再循环一次，对v-if的进行显隐。也得在每次重渲染的时候遍
2020-05-20 15:23:03
179
1
原创 v-show无效，v-if有效的影响
v-if的作用：通过控制Dom节点的存在与否v-show的作用是：控制元素的显隐，设置dom元素的display的样式他们两者的区别就是是否影响性能方面，如果经常性用到了切换，就需要用v-show如果是偶尔性的切换，那就用v-if但按照常理来说，不考虑性能方面，我们一般能用v-if也一定可以用到v-show但最近小编在撸代码的过程中，遇到了一个神奇的事我用了element ui中的table组件，有两列是要进行点击切换显隐的。如图用了v-show失效，奇怪，后来发现，原来是因为v-show
2020-05-20 14:56:09
1952
原创 解决返回上一级this.$router.go(-1)页面不刷新的问题
需求：给你一维数组，里面是通过父节点的id与子元素挂钩。dataList: [{“gid”: 1,“parentId”: null,“name”: “评价0”,“siblingId”: 0},{“gid”: 2,“parentId”: null,“name”: “评价1”,“siblingId”: 1},{“gid”: 3,“parentId”: null,“na...
2020-02-17 21:01:50
9768
2
原创 offsetWidth,offsetHeigh, offsetLeft, offsetTop,getBoundingClientRect(),clientY,clientX的区别
e.clientY,e.clientX-----表示的是记录当前的坐标。
2020-01-16 20:24:00
717
原创 实现翻页组件
<template> <div class="turnpage-container"> <!-- 向左移动 --> <div @click="onBeforenavClick()"> //插入左边内容 <slot name="turnBefore"> <i class="el-...
2020-01-16 19:28:03
272
原创 vue.js实现拖拽组件
拖拽组件的完成，首先要涉及的知识点是vue自定义指令的掌握 。简单介绍vue中的自定义指令。官网的介绍自定义指令中的是在元素开始挂载就执行的指令，也就是在vue的生命周期的mounted周期。<template> <div class="content"> //利用插槽。拖拽头部，带动整个div <div draggable="true" v-d...
2020-01-16 17:30:15
621
原创 css多颜色的不同展示
若要实现每一行的展示不同的颜色，鼠标移动进去也要不同的颜色。 <div class="icon-background" **:class="'level' + (index + 1)"** @click="onIconClick(item,index)"> <style lang="scss" scoped>$background-color: ...
2020-01-16 17:07:49
629
原创 实现点击显示与隐藏
若要实现点击显示右下脚的图标，再点击就不显示右下脚的图标。一个简简单单的需求，其实很简单。思路是这样的，我点击的时候显示，再点击的时候就不显示，那这样的话，是要有一个标识，通过v-if或者v-show来显示是否隐藏。v-if 与v-show的区分v-if是有销毁的过程 v-show是会缓存下来，然后进行的切换如果是经常性要用到的话，就采用v-show如果是偶尔性，那就采用v-if...
2020-01-16 10:58:56
734
原创 关于v-for循环出来的方法和不同的颜色的用法
这里是循环出来的数组，我要在每一个span中定义方法，那我就需要在data中的数组定义method
2019-12-17 14:32:28
1152
原创 关于父子的那一些事
vue中最典型的关系就是父子，兄弟关系，关于父子之间的数据传递，就是“传与触”父亲要把值传给下一代，首先他要自己本身有这个数据，才能传给下一代，在父组件中绑定子组件这个是父组件的index子组件的接受到父组件给来的“财产",那就得接收，以下是子组件的index这样的话，子组件就可以得到父组件传来的数，子组件只能对父组件传来的值进行传递呈现，不能进行修改，如果想在子组件上修改父组件传来的...
2019-12-17 14:12:01
78
原创 导航条的字数不一致，如何均衡分布滚动
在上上一篇的时候，我写了关于导航条点击跳转到下一页，还有滚动到一定的位置会翻转到下一页，这个功能的思路就是新建数组，构造一个新的数组。在每一个li中我们都定死了一个宽度。原本我的头说，没事，你先定死一个宽度，到时间ui来设计就可以了。等到ui来，说，不行啊，不能每一个定死一个宽度啊。就这样，好，改。自己还是太菜了。后来就讨论说，每一行我都规定5个li，每一次点击下一个，又是一个新的数组5个。可...
2019-10-16 14:36:52
429
1
原创 关于全选的那些事
全选全不选，取消全选，这三个小功能，网上搜索了一下，普遍都是单选的按钮都是用input来实现，通过v-model来实现，通过v-model点击后的数据的长度与原数据的长度来进行比较，实现全选全不或者取消选择的功能。但是在如上的图片中，看出没有复选框让我们单击按钮。是由一个div来实现的，并没有input。那就没有v-model了，但其实思路都是一样的。手工全选和取消全选，我们可以根据事件来判断...
2019-10-16 14:21:51
117
原创 devServer来解决前端跨域问题
首先，作为一名前端的实习生，当leader来跟你说，这里有一个跨域问题，你来解决一下。跨域问题，不应该是后台改一下就可以了吗？看了Vue CLI的开发文档，哦，原来是这样子的。官网的介绍如果你的前端应用和后端 API 服务器****没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy ...
2019-10-14 10:31:14
1904
原创 实现导航条的滚动与对应页面的跳转
要实现的功能是导航条的滚动，我如果是首行的话，向左滚动显示灰色，如果不是首行，向左滚动不显示灰色。向右滚动同样的道理。另外，要实现的是我导航滚动到最右边会自动跳转到下一页，我滚动到最左边会自动跳转到上一页。就这样简简单单的功能，我太菜了！！！首先，要首先点击右图标会跳转下一页。点击左图标会跳转上一页。那这个功能又是怎么一个思路。想了好久。。。。。新建一个数组，一点击的时候重新构造一个新的数组...
2019-10-12 10:20:21
1216
1
原创 获取父组件传过来的动态数组
一般父子相传的，父组件定义数组，然后遍历，在父组件中的该子组件绑定数组。子组件通过prop来获取到一般的操作！父组件要传的数据如果在父组件中不是定死的话，而是通过接口或者动态的数据来显示的话，需要加以下这一句至于这个是为什么呢，当父组件 topTypeList 获取到数据，子组件使用 props 接收数据时，执行 mounted 的时候 这个方法 还没有运行到，而且 mou...
2019-09-29 21:24:06
432
原创 实现点击按钮导航条向左向右移动的状态
我一点击右边的点击按钮，变成这样了我一点击左移按钮，就回来了那这个是怎么一个实现的呢？做了一个早上，目前小编基础还不扎实，需要再接再厉。文章有任何写的不好的，还往多多指教。新建一个数组，把该数组一点击要显示的内容放在这个新数组去，通过下标(index)的改变。来获取新的数组。代码如下先初始化。没有以下这一句的，项目刚开始一启动导航条的数据没有显示。...
2019-09-27 16:40:16
1411
原创 父子组件通信中数据的传递eventBus
对于通信中数据的传递，有两种方法，一种是用vuex，vuex属于比较便捷的方法，而且后期的维护也比较好。适合大型的项目。另一种方法是用eventBus（事件总线）eventBus其实就是组件之间的桥梁。可以向这一座桥注册发送事件或者接收事件。缺点就是使用不慎，后期难以维护。那么小型的项目，我们可以用eventBus。怎么用呢？先导入$emit触发或者发送这个事件。toTopicTree是...
2019-09-23 17:09:01
250
原创 如何动态获取数组的长度
像这样的，数组的长度是根据里面的内容来判断的，这个导航条又是数组遍历出来的，那我们应该怎么去获取呢有一直方法是我在导航条的数组中再遍历一组内容显示的数组。直接获取数组中数组的长度即可这样就可以动态获取长度了。还有一个问题是，我内容的数组我又如何遍历出来啊果然一个bug解决了，另一个bug又来了根据下标来获取还有一种方法是...
2019-09-20 21:32:38
1605
原创 VScode编译器的常规插件
eslint插件对于代码的格式化要求很高vscode建议配置的vscode建议配置{“workbench.startupEditor”: “newUntitledFile”,“window.zoomLevel”: 0,“explorer.confirmDragAndDrop”: false,// 控制是否显示 minimap“editor.minimap.enabled”: fa...
2019-09-20 21:23:24
547
原创 实现导航条滚动的效果
要实现有滚动的效果，我们的初想是宽度超过100%，我们就设置属性overflow-x: scroll;overflow-y: hidden;理想是美好的，但是现实不是子节点类nav-tap-item无论宽度怎么改，他仿佛都没有改变，会自适应宽度，是因为权限不够？emem，搞了两个小时，最后发现，加上 min-width ：90px；就可以实现滚动条的效果了。后来想了一些，之前做...
2019-09-20 09:14:04
175
原创 vue-cli中局部全局使用sass
vue-cli是我们的veu的脚本架，是我们开启一个项目的框架。sass是一个css的升级版。能纠正css带来的缺点。Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能。在vue-cli中安装sassnpm i -D sass-...
2019-09-16 10:21:23
463
原创 npm ERR
一个项目，下载依赖包，正常操作 npm install 就可以下载成功了，这一次发现，居然出现bug cnpm 就可以了，神奇的事情最后百度什么的，脑子一想，我先更新一下npm的版本先 。命令npm install -g npm更新后，再下载就可以了...
2019-09-09 20:05:07
140
1
原创 实现鼠标移进去图标的显示与否
确实很简单，但是我还是得记录一下，多记录多积累，才是程序员猴鼠标移进去显示，移出来不显示的思路是不显示的就display:none显示的话就display ：inline 或者block 具体的看你要实现的功能比如没错，只需这样就可以啦...
2019-09-09 10:59:40
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人