自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(46)
  • 收藏
  • 关注

原创 echarts图自定义tooltip vue

tooltip的trigger的值可以有’item’、’axis’。以饼图为例分析tooltip,seriesName是series数据的name,marker是legend图例的颜色图标,name是该项图例的名字,percent是饼图占比

2023-04-27 10:39:19 1036 2

原创 实现表格可编辑(点击字段出现输入框)vue elementUI

按行保存数据,每行数据最后都有一个保存按钮,使用的是嵌套

2023-04-24 17:23:04 3749 6

原创 disabledDate根据开始时间设置结束时间禁用状态 vue elementUI

开始和结束时间的输入框是两个单独的输入框,结束时间需要根据开始时间进行计算。两者之间的间隔是正好一周,比如:开始时间选完1号之后,结束时间只有7号这一天可以选择,其他时间都被禁用。同时,还设置了一个默认值,即最近的一周,如:今天7号,那么开始时间是1号,结束时间是7号。完整代码如上:相关方法有注释。

2023-04-07 17:30:51 664 1

原创 实现无数据的柱子在trigger中不显示echarts

没有数据的柱子置为null,但是trigger还是会显示该柱子的信息,此时我想让它不显示,就用formatter判断了一下,只显示value值有数据的,代码如下: formatter:function(param){ var toolShow = param[0].name; for(let i=0;i

2023-04-07 17:07:43 386 1

转载 修改elementUI轮播图鼠标划入轮播暂停的原生效果

修改elementUI轮播图鼠标划入轮播暂停的原生效果_Boriska1996的博客-CSDN博客_iview carousel 暂停

2023-02-22 09:48:58 400 1

原创 Vue中对iframe实现keep alive(无刷新)

/ 只有在标签页列表里的页面才使用keep-alive,即关闭标签之后就不保存到内存中了。然后,再改Home.vue,在此文件中之前就是使用keep-alive写的,在下面加个ifame的。// 只有在标签页列表里的页面才使用keep-alive,即关闭标签之后就不保存到内存中了。// 实现懒加载,只渲染已经打开过(hasOpen:true)的iframe页。// 遍历路由的所有页面,把含有iframeComponent标识的收集起来。//-----iframe页面-------

2023-02-10 17:01:32 1644 1

原创 echarts将width的百分之百识别成100px的问题

当容器大小发生变化时使用 window.onresize = myChart.resize 可使图标随着屏幕大小改变。(这里我写window.onresize没用,所以就如下写的)此问题是echarts未识别到width,然后它默认最小宽度是100px,所以宽度就变成了100px。使用mycharts.resize()函数解决。echarts 的resize 用来。在画echarts图的方法的最下面调用resize()写了一个setTimeout防止不运行resize。

2023-02-09 16:47:22 495 1

原创 解决vue-awesome-swiper的4.1.1版本不兼容ie问题

使用vue-awesome-swiper的4.1.1版本的组件,并且在main.js中引入,导致整个vue项目都无法在ie中打开。内网电脑(无法使用npm install)更改版本过程,用外网电脑新创建了一个项目,然后运行npm install vue-awesome-swiper@3.1.3下载完成之后,找到此项目的node_modules然后根据此文件夹文件更改的时间顺序找到刚才下载的文件并且将他们替换内网项目的node_modules的对应文件即可。

2023-02-03 15:30:57 855 1

原创 表格当前行编辑弹框的表单和表格数据联动

弹框表单获取当前行数据的时候不能直接给他赋值成scope.row,可以一个数据一个数据的赋值,例如:this.editForm.editId=row.editId;编辑表格中当前行的数据的时候,将编辑弹框中的表单直接赋值成了scope.row导致错误,使在弹框中的表单输入数据的时候,同时更改了表格中当前行的数据。

2023-02-03 15:05:27 124 1

原创 +new tag标签el-tag vue与elementui

官网的是只有一个tag标签的例子,表格的展开行是多个tag标签,若如上写inputValue和inputVisible只在data中定义一次,则每个tag标签绑定的值都是同一个会互相受影响,现改成如下(在表格获取数据的时候定义的inputValue和inputVisible):

2023-01-12 17:26:32 539 1

原创 login登录密码验证html vue

使用@input方法,正则表达式判断

2023-01-10 16:48:41 329 1

原创 哈希Map和Set函数

存在重复元素:给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 ,返回 true ;如果数组中每个元素互不相同,返回 false 。

2022-12-30 11:02:20 83 1

原创 实现背景一半白一半蓝并且颜色占比使用动态css

知识点linear-gradient第一个参数:方向(可以为角度) 第二至多个参数:颜色 占比(可有可无) 至下一个参数颜色渐变。

2022-12-08 16:41:01 1810 1

转载 Vue动态样式 :class

以上:class根据条件判断结果分配给相应标签class如下:(根据此class写相应css):class = "{className1:(条件1),className2:(条件2)}"语法①:(写在标签里)className可以加上'',也可以不加引号。使用:class实现css动态样式。

2022-12-08 15:58:46 1516 1

原创 自定义el-tree复选框选中状态vue elementUI

父节点展开状态,实现选中父节点只选中其第一级子节点,并且要把父节点从所有已经选中的节点中删除,即只保留子节点。父节点折叠状态,实现只选中父节点,不选中其子节点。

2022-12-07 15:21:40 7039 1

原创 自定义走马灯的左右按钮vue elementUI

自定义走马灯的左右按钮。这里的左右切换按钮,使用的是图片,,(随便找的网图凑合看看)。点击左右按钮会实现左右切换走马灯。代码如下:

2022-12-07 15:04:45 3180 1

原创 el-divider分割线修改css样式vue 与elementui

此分割线有一个默认的样式,如下: horizontal表示横向的分割线。Divider Attributesvertical表示竖向分割线。调整css样式的时候,想把分割线调整的更靠近文字时,可以写.el-divider也可以写.el-divider--horizontal,都会生效。

2022-12-06 14:03:39 2929 1

原创 span标签设置文本溢出内容显示省略号,鼠标悬浮显示全部内容vue elementui

完整代码如下:<template> <div class="border">   <div class="border-title">     <span>我的消息:</span>     <span>10</span>   </div>   <div class=&quo

2022-12-06 14:01:28 3522 1

原创 div中使用V-FOR vue与elementui

<div v-for="(item,index) in arrayText"           :key="index">     <span>{{index + 1}}</span>     <span class="text-name">{{item.text}}</span> &nbs

2022-12-06 13:58:50 640 1

原创 边框中间添加文字(边框线在文字两边横穿文字)vue elementui

(边框线在文字两边横穿文字)方法:给文字区域定义一个长和宽,然后让其背景是白色,再把文字移动到相应的位置就可以具体效果如下: 代码如下:

2022-12-06 13:56:14 2902 1

原创 el-card多个卡片布局

Row AttributesCol Attributes<el-row :gutter="20"> <el-col :span="16"><el-card></el-card> <el-row :gutter="16" style="margin-top:10px;"> <el-col :span="12">

2022-12-06 13:48:18 9495 1

原创 Array数组定义

fill()方法,array二维数组定义

2022-12-02 16:22:33 665 1

原创 杨辉三角求第n行

求第rowIndex行如下:(只计算一行的数据,只需定义一个一维数组就可以了)已知:每一行的第一个元素都是1,所以可以通过这个往下计算。但是,直接通过阶乘写算法,时间复杂度较高。第n行的第m个元素是。

2022-12-02 16:19:36 1461 1

原创 数组解释nums[i++] = nums[j++]

nums[i++] = nums[j++]//先赋值再i=i+1,j=j+1。nums[++i] = nums[++j]//先i=i+1,j=j+1再赋值。nums[i++]=1与nums[++i]=1的区别。nums[++i]=1//先i=i+1,再赋值。nums[i++]=1//先赋值再i=i+1。

2022-11-08 13:53:39 1510 1

原创 vue项目使用定时器每隔几秒运行一次某方法

setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。其原因与JS引擎线程有关(需深入研究JS引擎线程) ,但是setTimeout是自带清除定时器的。一个是循环执行setInterval,另一个是定时执行setTimeout。1:setInterval 循环执行, 每隔一段时间执行一次, 多次执行。2:setTimeout 到时间后执行, 只执行一次。定时器需要在页面销毁的时候清除掉,不然会一直存在!timer:null, //定时器名称。

2022-11-08 10:50:19 9574 1

原创 input输入框验证规则trigger遇到的bug有值却仍然显示不通过 vue与elementUI

点击input输入框出现弹框,弹框选择数据之后,input输入框回显数据,但是trigger使用blur,此时验证未查到数据,所以,此时输入框中即使有数据,也会报错提示请输入内容。下拉框(el-select)、日期选择器(el-date-picker)、复选框(el-checkbox)、单选框(el-radio)验证时,trigger的值选择。对el-input输入框的验证,trigger的值选。,即当值发生变化时就进行验证。,即失去焦点时进行验证。

2022-09-14 10:27:25 4109 1

原创 vue与elementUI清空table多选框的选中状态

当把table放dialog弹框的时候,关闭dialogtable对话框需要把多选框的选中状态清空。弹框里面的表格我是引用了一个子组件。就是解释一下,引用子组件情况该怎么清空

2022-09-07 13:41:03 4610 1

原创 vue与elementUI进度条组件并控制进度条加载速度(文件下载为例)

vue与elementUI进度条组件并控制进度条加载速度(文件下载为例)这里采用的“假进度条”,触发下载时先让他平稳加载,最后加载完成直接百分之百。采用progress进度条组件点击确定下载按钮,会显示进度条,并且每隔500ms加载5%。下面就调用接口,调用完成就this.progressPercent=100

2022-09-05 17:47:22 4616 1

原创 elementui表格中使用Radio 单选框,获取选中的当前行数据。

并做相应解释:①绑定使用唯一值id进行绑定数据,保证数据唯一性。(不然console会刷出了好多数据)②因为label的显示原因,会默认将数据id显示出来。所以这里使用{{}}来显示表格中radio当前行数据。③change.native方法:.native 官网解释:你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。这里也可以只传参一个,不用传scope.$index也可以。

2022-09-05 10:25:30 4305 1

原创 select下拉框调接口获取数据,并且通过change方法获取label对应的列表数据

这里就是通过value的值,将值给v-model绑定的值,然后将v-model绑定的值通过change方法作为参数,从而获取到该select选项也就是label对应的所有数据。:value="item">//若写item.id,则只有id传给model。getRoleId(val){//val表示label对应的那一组数据。

2022-09-05 09:24:24 4272 1

原创 动态设置select禁用

动态设置select禁用有两个输入框,让第一个有值时,第二个选择框才可选择内容。因为你关之前isDisabled=false,,此时disabled不为true(刷新页面过后才是初始页面,初始时disabled为true)再打开时未选择第一个输入框的值,就不会触发方法,disabled仍为false。这样写的话,当我第一个输入框选中值之后,第二个select变为不禁用,此时,我使用clearable清空第一个输入框,第一个输入框没有值,第二个应该变成禁用,但是并没有变成禁用。...

2022-08-16 16:51:50 4776 1

原创 vue element ui input 正则验证验证输入框只能输入整数以及只能输入整数和小数

代码】vue element ui input 正则验证验证输入框只能输入整数以及只能输入整数和小数。

2022-08-05 14:04:02 4511 1

原创 vue与elementUI中input输入框日期格式选择<el-date-picker

vue与elementUI中input输入框日期格式选择

2022-07-27 11:06:02 3249 1

原创 vue实现input输入框保留两位小数

toFixed()方法可把Number四舍五入为指定小数位数的数字。forEach() 是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是for循环的升级版,JSON 对象使用在大括号 {...} 中书写。对象可以包含多个 **key/value(键/值)**对。parseFloat()函数 可解析一个字符串,并返回一个浮点数。input输入框的值进行四舍五入保留两位小数。.........

2022-07-25 10:52:09 7590 1

原创 解决input框中加入disabled=“disabled“之后,改变字体的颜色(默认的是灰色)

此问题,以解决input框中加入disabled=“disabled“之后,改变字体的颜色(默认的是灰色)为例。我们要设置那个input样式时,要深入选中class=“el-input_inner”

2022-07-21 11:24:26 5404 1

原创 vue table表格中只有表头加竖线分割

table表格中只有表头加竖线分割给加一个属性 ::header-cell-style="{'border-right':'1px solid #888888'}"

2022-07-20 15:07:12 3113 1

原创 实现可清空的input和重置按钮

此时,我们查询完成数据后,把输入框内容清空,点击查询按钮可以查询到所有用户信息。现在我们可以在输入框添加一个可以把输入框数据都清空的按钮,点击按钮输入框内容清空同时查询出所有用户信息。查阅element文档input中有一个可清空输入框,是使用clearable属性得到的...

2022-07-20 11:12:13 7916 1

原创 vue中axios将table表格数据导出至excel表格

ArrayBuffer不能直接操作,而是要通过类型数组对象或DataView对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件(.img,.pdf,.txt,.html,等等)。responseType表示服务器响应的数据类型,可以是‘arraybuffer’,‘blob’,‘document’,‘json’,‘text’,‘stream’,默认是‘json’...

2022-07-19 15:01:54 1446 1

原创 vue与elementUI电商后台管理系统笔记06

# 用户列表开发## 表格中Boolean值渲染成开关按钮### **作用域插槽**实现数据分页效果监听switch开关状态信息es6 模板字符串实现搜索功能实现可清空input实现添加用户的功能dialog对话框对话框中渲染一个表单自定义校验规则添加用户表单重置添加用户的预验证功能发起请求添加一个新用户实现用户信息修改操作根据ID查询用户信息绘制修改用户的表单完成删除用户操作完成删除用户操作提交用户列表功能代码到码云...

2022-07-18 09:19:47 722 1

原创 vue与elementUI电商后台管理系统笔记05

实现首页的路由重定向左侧菜单改造为路由链接用户列表开发实现被点击菜单栏高亮绘制用户列表的基本UI结构面包屑导航栏Card卡片视图区域获取用户列表数据axios.get用户列表数据渲染至表格表格添加索引列...

2022-07-12 17:52:48 563 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除