![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
哆啦A敏
这个作者很懒,什么都没留下…
展开
-
前端下载二进制流的表格
//导出数据 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 · 257 阅读 · 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 · 291 阅读 · 0 评论 -
element 树型结构表格的合并问题
完成以上的树型结果的表格,需要掌握以下几点。首先,我们先看比较简单,总价单元格的合并的问题,这里总价是合并了两列。他实际上其实就是用到element 中的show-summary 同时定义了table中的refs实际上就是获取到了表格的元素,然后获取到table底部,进行合并。其实,我们要做的第二个比较简单,就是如何让树型表格禁用收缩功能,element自带的方法,让他每一次点击都处于展开的状态最后,就是树型合并的问题,子级的层级不确定数,所以我们需要用到递归的方法<!-- 公共S.原创 2021-03-23 18:10:48 · 1586 阅读 · 0 评论 -
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 · 1087 阅读 · 0 评论 -
正则表达式的使用与判断
正则表达式。首先出现在我们面前的这五个字,我们要对他有个印象。正则表达式表示检查是否有某个字串,将你找到的字串进行配对或者替换等正则表达式格式是:/内容/ 以两条斜线表示的是正则表达式前两天,小编遇到了一个需求,就是在导入表格的时候,需要把x坐标中的开头38两个数字给去掉。一开始小编的写法是watch:{//导入的表格的数据dataList(val){val.forEach(function(value,index)=>{if(value.x.trim().slice(0,2)===原创 2020-07-17 19:09:44 · 1357 阅读 · 0 评论 -
vue中根据某一个值的改变而动态改变样式
最近有一个需求,动态改变宽度。缩小就变420px,放大宽度就应该占满整个屏幕,第一步,在div那里定义一个ref的值第二步,计算屏幕的宽度第三步,监听数的改变,从而改变样式4.完美,收工。...原创 2020-07-03 17:28:53 · 4069 阅读 · 0 评论 -
element表格中根据窗口自适应高度
1.表格自适应高度,有两种方法,方法一:外部div定死一个高度,里面的table的高度定位百分比,也就是基于最外层的div的高度的百分比。缺点是:只能适应本电脑分辨率或者小于本电脑的分辨率,大于本电脑的分辨率,就会出现不一样的效果。方法二(推荐)使用window.innerHeight来计算高度。紧接着就 ,以及减去其他的高度乘以根字体的大小再除于100优点是兼容高低分辨率方法一<div class="container"><el-table height="90%">原创 2020-07-03 17:21:54 · 1188 阅读 · 0 评论 -
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 · 197 阅读 · 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 · 1971 阅读 · 0 评论 -
解决返回上一级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 · 9831 阅读 · 2 评论 -
offsetWidth,offsetHeigh, offsetLeft, offsetTop,getBoundingClientRect(),clientY,clientX的区别
e.clientY,e.clientX-----表示的是记录当前的坐标。原创 2020-01-16 20:24:00 · 735 阅读 · 0 评论 -
实现翻页组件
<template> <div class="turnpage-container"> <!-- 向左移动 --> <div @click="onBeforenavClick()"> //插入左边内容 <slot name="turnBefore"> <i class="el-...原创 2020-01-16 19:28:03 · 278 阅读 · 0 评论 -
vue.js实现拖拽组件
拖拽组件的完成,首先要涉及的知识点是vue自定义指令的掌握 。简单介绍vue中的自定义指令。官网的介绍自定义指令中的是在元素开始挂载就执行的指令,也就是在vue的生命周期的mounted周期。<template> <div class="content"> //利用插槽。拖拽头部,带动整个div <div draggable="true" v-d...原创 2020-01-16 17:30:15 · 641 阅读 · 0 评论 -
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 · 653 阅读 · 0 评论 -
实现点击显示与隐藏
若要实现点击显示右下脚的图标,再点击就不显示右下脚的图标。一个简简单单的需求,其实很简单。思路是这样的,我点击的时候显示,再点击的时候就不显示,那这样的话,是要有一个标识,通过v-if或者v-show来显示是否隐藏。v-if 与v-show的区分v-if是有销毁的过程 v-show是会缓存下来,然后进行的切换如果是经常性要用到的话,就采用v-show如果是偶尔性,那就采用v-if...原创 2020-01-16 10:58:56 · 741 阅读 · 0 评论 -
关于v-for循环出来的方法和不同的颜色的用法
这里是循环出来的数组,我要在每一个span中定义方法,那我就需要在data中的数组定义method原创 2019-12-17 14:32:28 · 1174 阅读 · 0 评论 -
关于父子的那一些事
vue中最典型的关系就是父子,兄弟关系,关于父子之间的数据传递,就是“传与触”父亲要把值传给下一代,首先他要自己本身有这个数据,才能传给下一代,在父组件中绑定子组件这个是父组件的index子组件的接受到父组件给来的“财产",那就得接收,以下是子组件的index这样的话,子组件就可以得到父组件传来的数,子组件只能对父组件传来的值进行传递呈现,不能进行修改,如果想在子组件上修改父组件传来的...原创 2019-12-17 14:12:01 · 82 阅读 · 0 评论 -
导航条的字数不一致,如何均衡分布滚动
在上上一篇的时候,我写了关于导航条点击跳转到下一页,还有滚动到一定的位置会翻转到下一页,这个功能的思路就是新建数组,构造一个新的数组。在每一个li中我们都定死了一个宽度。原本我的头说,没事,你先定死一个宽度,到时间ui来设计就可以了。等到ui来,说,不行啊,不能每一个定死一个宽度啊。就这样,好,改。自己还是太菜了。后来就讨论说,每一行我都规定5个li,每一次点击下一个,又是一个新的数组5个。可...原创 2019-10-16 14:36:52 · 451 阅读 · 1 评论 -
关于全选的那些事
全选全不选,取消全选,这三个小功能,网上搜索了一下,普遍都是单选的按钮都是用input来实现,通过v-model来实现,通过v-model点击后的数据的长度与原数据的长度来进行比较,实现全选全不或者取消选择的功能。但是在如上的图片中,看出没有复选框让我们单击按钮。是由一个div来实现的,并没有input。那就没有v-model了,但其实思路都是一样的。手工全选和取消全选,我们可以根据事件来判断...原创 2019-10-16 14:21:51 · 124 阅读 · 0 评论 -
devServer来解决前端跨域问题
首先,作为一名前端的实习生,当leader来跟你说,这里有一个跨域问题,你来解决一下。跨域问题,不应该是后台改一下就可以了吗?看了Vue CLI的开发文档,哦,原来是这样子的。官网的介绍如果你的前端应用和后端 API 服务器****没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy ...原创 2019-10-14 10:31:14 · 1908 阅读 · 0 评论 -
实现导航条的滚动与对应页面的跳转
要实现的功能是导航条的滚动,我如果是首行的话,向左滚动显示灰色,如果不是首行,向左滚动不显示灰色。向右滚动同样的道理。另外,要实现的是我导航滚动到最右边会自动跳转到下一页,我滚动到最左边会自动跳转到上一页。就这样简简单单的功能,我太菜了!!!首先,要首先点击右图标会跳转下一页。点击左图标会跳转上一页。那这个功能又是怎么一个思路。想了好久。。。。。新建一个数组,一点击的时候重新构造一个新的数组...原创 2019-10-12 10:20:21 · 1240 阅读 · 1 评论 -
实现导航条滚动的效果
要实现有滚动的效果,我们的初想是宽度超过100%,我们就设置属性overflow-x: scroll;overflow-y: hidden;理想是美好的,但是现实不是子节点类nav-tap-item无论宽度怎么改,他仿佛都没有改变,会自适应宽度,是因为权限不够?emem,搞了两个小时,最后发现,加上 min-width :90px;就可以实现滚动条的效果了。后来想了一些,之前做...原创 2019-09-20 09:14:04 · 181 阅读 · 0 评论 -
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 · 470 阅读 · 0 评论 -
npm ERR
一个项目,下载依赖包,正常操作 npm install 就可以下载成功了,这一次发现,居然出现bug cnpm 就可以了,神奇的事情最后百度什么的,脑子一想,我先更新一下npm的版本先 。命令npm install -g npm更新后,再下载就可以了...原创 2019-09-09 20:05:07 · 143 阅读 · 1 评论 -
实现文字一点击样式修改
实现以上的图片效果,要在遍历的过程中绑定类,并在添加 点击事件原创 2019-09-09 11:31:23 · 419 阅读 · 2 评论 -
实现鼠标移进去图标的显示与否
确实很简单,但是我还是得记录一下,多记录多积累,才是程序员猴鼠标移进去显示,移出来不显示的思路是不显示的就display:none显示的话就display :inline 或者block 具体的看你要实现的功能比如没错,只需这样就可以啦...原创 2019-09-09 10:59:40 · 164 阅读 · 0 评论 -
vue 中如何引入本地图片, 实现图片循环遍历 & 文字换行循环遍历
vue 中如何引入本地图片, 实现图片循环遍历 & 文字换行循环遍历要实现图片的循环遍历,1.在data中把图片的路径用数组组合而成。比如data(){return {content_top:[{ title:‘图片1", src:’./imges/a.png’ key:‘0’},{ title:‘图片2", src:’./imges/b.png’,key:‘1’},{...原创 2019-09-09 10:38:59 · 8454 阅读 · 0 评论 -
VScode编译器的常规插件
eslint插件对于代码的格式化要求很高vscode建议配置的vscode建议配置{“workbench.startupEditor”: “newUntitledFile”,“window.zoomLevel”: 0,“explorer.confirmDragAndDrop”: false,// 控制是否显示 minimap“editor.minimap.enabled”: fa...原创 2019-09-20 21:23:24 · 565 阅读 · 0 评论 -
如何动态获取数组的长度
像这样的,数组的长度是根据里面的内容来判断的,这个导航条又是数组遍历出来的,那我们应该怎么去获取呢有一直方法是我在导航条的数组中再遍历一组内容显示的数组。直接获取数组中数组的长度即可这样就可以动态获取长度了。还有一个问题是,我内容的数组我又如何遍历出来啊果然一个bug解决了,另一个bug又来了根据下标来获取还有一种方法是...原创 2019-09-20 21:32:38 · 1616 阅读 · 0 评论 -
父子组件通信中数据的传递eventBus
对于通信中数据的传递,有两种方法,一种是用vuex,vuex属于比较便捷的方法,而且后期的维护也比较好。适合大型的项目。另一种方法是用eventBus(事件总线)eventBus其实就是组件之间的桥梁。可以向这一座桥注册发送事件或者接收事件。缺点就是使用不慎,后期难以维护。那么小型的项目,我们可以用eventBus。怎么用呢?先导入$emit触发或者发送这个事件。toTopicTree是...原创 2019-09-23 17:09:01 · 255 阅读 · 0 评论 -
实现关闭功能
如何实现关闭图标的关闭功能不就是用v-show吗没有,就是用v-show,可是小编每一次都忘记这个!!!!所以要记下来原创 2019-09-24 17:20:13 · 175 阅读 · 0 评论 -
多个接口之间的判断
我添加功能实现后,我要把添加的数据添加到相应的接口里面去。可是在添加的子组件中,有好多个接口。如何对应好。加参数传递判断。原创 2019-09-26 09:30:44 · 213 阅读 · 0 评论 -
element ui样式修改
element ui的样式原本已经写好了,我们要强硬修改他的样式。就需要用穿透法。样式穿透语法>>>(推荐)。原创 2019-09-26 09:44:32 · 408 阅读 · 0 评论 -
实现点击按钮导航条向左向右移动的状态
我一点击右边的点击按钮,变成这样了我一点击左移按钮,就回来了那这个是怎么一个实现的呢?做了一个早上,目前小编基础还不扎实,需要再接再厉。文章有任何写的不好的,还往多多指教。新建一个数组,把该数组一点击要显示的内容放在这个新数组去,通过下标(index)的改变。来获取新的数组。代码如下先初始化。没有以下这一句的,项目刚开始一启动导航条的数据没有显示。...原创 2019-09-27 16:40:16 · 1420 阅读 · 0 评论 -
获取父组件传过来的动态数组
一般父子相传的,父组件定义数组,然后遍历,在父组件中的该子组件绑定数组。子组件通过prop来获取到一般的操作!父组件要传的数据如果在父组件中不是定死的话,而是通过接口或者动态的数据来显示的话,需要加以下这一句至于这个是为什么呢,当父组件 topTypeList 获取到数据,子组件使用 props 接收数据时,执行 mounted 的时候 这个方法 还没有运行到,而且 mou...原创 2019-09-29 21:24:06 · 435 阅读 · 0 评论 -
antd vue 实现复选框选中触发事件不打勾
antd vue 实现复选框选中触发事件不打勾要实现这样的功能,我一点击复选框,他要弹出对话框,同时也实现复选框不打勾原创 2019-09-03 13:04:29 · 2746 阅读 · 0 评论