![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element-ui
HuiRonmantic
5年+ 前端老哥,文章只是做一些记录,大家如有需要文章,记得点赞收藏评论哦
展开
-
vue-admin-beautiful 项目中接口去除,空字符串,数字0,false 等参数时不给接口传参问题配置取消和添加修改
阿斯顿撒原创 2023-03-25 16:04:35 · 28 阅读 · 0 评论 -
element-ui中 this.$confirm修改确定取消按钮顺序和样式
【代码】element-ui中 this.$confirm修改确定取消按钮顺序和样式。原创 2022-10-31 17:54:26 · 1687 阅读 · 0 评论 -
el-select多个时,el-select筛选选中过的值,第二个el-select中过滤上一个选中的值
代码原创 2022-06-01 16:23:36 · 1220 阅读 · 0 评论 -
Echarts多排柱状图动态处理,动态渲染数据处理
后端返回的数据格式是一般的数据格式,前端处理还是比较复杂,此处做个记录数据格式效果图 X轴年月和每一组的柱状图条数都是动态的代码中的输出数据格式代码getData就是获取后端数据的接口 getDataval).then((res) => { if (res.code == 200) { var main = [] var arr3Year = [] var dataYList = []原创 2022-05-18 09:22:30 · 3373 阅读 · 0 评论 -
el-date-picker比较两个时间值大小,el-date-picker循环组件比较两个时间值大小
el-date-picker比较两个时间值的大小,el-date-picker循环组件比较时间值的大小change事件用于时间比较值dom部分 <el-row> <el-col :span="12"> <el-form-item label="*开始时间:"> <el-date-picker原创 2022-05-05 14:07:38 · 1789 阅读 · 0 评论 -
Vue element-ui 全局配置时间戳转换正确日期
使用和安装moment.js 即可npm install moment -Soryarn add moment -S在main.js全局引入注册使用这个插件import moment from "moment";// 全局过滤器的定义Vue.filter("global_filter", function(value, type = "YYYY-MM-DD hh:mm:ss") { return moment(value).format(type);});使用:单标签使用&原创 2022-03-30 17:19:08 · 618 阅读 · 0 评论 -
Echarts 折线图或者其他图表切换数据时,有残留,Echarts二次查询残留上次数据解决办法
概述:如果首次查询的折线图有8条,二次查询的只有5条,刚开始还以为是后端传错了,结果查看以后,后端数据返回的数据条目是对的,那问题肯定就是前端的了,本以为每次查询清空所赋值的对象或数组,也不行。结果了解以后是Echarts渲染的问题。原因:折线图setOption时,默认对option进行合并,所以即使一次选择一条数据渲染时(除了首次)也会数据重叠显示多条折线解决方案1:根据api上说的,notMerge参数默认为false,设置成true,只要不让它合并数据那么问题就解决了mychart.se原创 2021-12-23 11:37:59 · 4870 阅读 · 4 评论 -
el-select 多选,清空,选择“全部”其余清空,取消全部,其余还原
el-select 多选,清空,选择“全部”其余清空,取消全部,其余还原记录一下 <el-form-item v-show="formData.pushScope == '个人'" label="选择学生:"> <el-select id="newStyle" v-model="formData.studentIdList" multiple pla原创 2021-12-22 16:02:00 · 5034 阅读 · 0 评论 -
v-for 中循环的 el-button loading 改变当前点击的状态
循环中的 el-button loading 改变当前点击的状态方案:利用this.$set 给当前点击的对象插入一个布尔值变量点击事件中操作原创 2021-12-22 09:40:18 · 1318 阅读 · 0 评论 -
vue props传递数组子组件获取不到 ,Vue父组件传给子组件的数组获取不到
问题描述子组件的值是通过父组件通过循环赋值的,且为数组,父组件打印该循环的值是可以得到的,但是在自组卷中就获取不到了子组件位置子组件接收的值需要通过watch监听处理才可以原因:父组件中定义的这个数组默认为空,值是在created钩子函数中axios获取到的,所以传入子组件的是data里定义的空数组。解决:子组件用watch监听里一下,输出的当前的值是数组,之前的值是空,但是组件中用到的该变量依然打印为空。此时可将把要执行的方法也放入watch 中。...原创 2021-12-16 16:07:10 · 2904 阅读 · 0 评论 -
Element-ui 中el-upload上传图片暂存,以及切换回显图片
效果图DOM代码<div class="uploadStyle" v-if="dataList[num].questionType != '单项选择题'" @click="upLoader"> <div v-for="(item3, index3) in dataList" :key="index3" class="UplaodBox"> <el-原创 2021-12-09 16:51:50 · 1786 阅读 · 0 评论 -
element-ui el-table-column中多个字段数字相加,拼接多个字段
el-table-column行内多个字段相加,展示多个字段,一般后端返回的是字符串,也有的是数字,前端根据情况需要转行即可2中方案:parseInt()和Number()都可实现后端数据格式注:(Number(scope.row.count1)) 必须用双括号包起来,否则实现不了//Number() <el-table-column label="班级名称" min-width="200"> <template slot-原创 2021-07-08 09:32:24 · 4748 阅读 · 0 评论 -
ELementUI 树形控件el-tree半选状态获取父级节点id,菜单权限管理
el-tree一般常用于权限菜单授权,权限菜单管理等,此处做个小结应用场景:将选中的子节点的id和半选状态下的父级id传到一个新的数组里,作为参数后端用于菜单授权后端数据结构:isCheck = 1 时,为选中状态,子节点isCheck=1时,父节点isCheck 也是1问题:刚开始使用this.$refs.tree.getCheckedNodes()获取选中的值,此方法只能选中子节点的id,全选状态下这个方法才能获取到父节点的id,因此行不通使用 this.refs.leftTree.getC原创 2021-07-05 19:01:30 · 3100 阅读 · 2 评论 -
vue element-ui v-infinite-scroll懒加载,加载更多,上下滑动加载更多
vue element-ui v-infinite-scroll懒加载,向上下滑动加载更多其实这种滑动加载更多数据就是另外一种的常见分页功能,常见于v-for循环渲染出来的列表内容首先先看下后端返回内容结构,和前端传的所需参数第一次触发下拉事件,pageIndex = 2是没毛病的第一次下拉后端接口返回参数,每次新增10条,第一次下拉,pageNum = 2<template> //容器盒子 <div v-infinite-scroll="lo原创 2021-06-25 15:27:24 · 5297 阅读 · 3 评论 -
Vue , Element-ui实现 pdf文件禁止预览直接下载
Vue实现pdf文件禁止预览,直接下载此功能很常见,但是网上其他案例教程太过繁琐,在此用最快简单的方式实现一般情况下,后端返回的pdf文件是以文件流的形式返回,直接打开的话任何浏览器会解析PDF文件,直接显示的预览效果,而我们需要的是禁止预览直接下载后端返回的文件流,一般是乱码的实现方式:1:安装downloadjs 下载插件依赖npm install downloadjs 2:引入所需要的页面,如果想全局使用,可以再main.js中引入import download from 'dow原创 2021-06-18 18:29:23 · 2386 阅读 · 1 评论 -
Vue Element-UI el-select获取选中的label的值
这可能是一个比较常见到的问题,做个小笔记图例这是我案例中的数据结构以及字段,根据自己实际情况确定绑定的值代码部分<template> <span class="ml32">班级</span> <el-select v-model="classNames" placeholder="请选择班级" style="width: 150px;" id="classnames" @change="changes01">原创 2021-06-03 10:30:43 · 1388 阅读 · 0 评论 -
Vue获取循环列表文本值,Vue获取循环点击事件中的文本值
Vue获取文本值,获取点击循环列表的值可能单一获取文本值容易,但是网上的查到的方法都是event.target.innerText这个。这个是只能获取那种不循环的值<h2 v-on:click="select()">文本内容</h2>在methods中获取文本值methods: { select: function (event) { console.log(‘您选中的内容是》》 ’ + event.target.innerText);//打印得到了Ecos原创 2021-05-06 18:07:34 · 1343 阅读 · 1 评论 -
Element-ui中分页,搜索以后默认显示第一页
案例需求:在使用Element-ui分页组件的时候,发现一个小Bug,就是在当第一次查询数据渲染完毕以后,点击分页对应的某一页,例如当前显示第三页,这时去换一种不同的条件查询,点击查询以后,table表格数据渲染完毕以后,显示的还是第三页,不是第一页,所以此处做个小笔记*粗略案例图*解决办法-- :current-page.sync=“cur_page”<template><div class="pagination"> <el-pagination转载 2020-10-12 15:21:18 · 4207 阅读 · 3 评论 -
Vue+Element-ui 单选,多选可编辑当前行内容,并保存更新
需求:基于element-ui的表格,可以单选,且选择以后可以编辑,没有选中是不能编辑的,编辑以后保存数据效果预览在使用单选和多选这个组件的时候,还是很容易采坑的**由于这个案例中的表格字段太多,此处只是列出了一两个,作为参考即可**表单数据中,每一行都有一个可以编辑保存的内容,为el-input的组件,在没有选中的情况下是灰色不可编辑的,选中以后是可以编辑的,因此需要给这个input的框加上:disabled=“scope.row.isWrite” 这样一个动态属性<template原创 2020-09-22 16:33:37 · 2356 阅读 · 4 评论 -
Element-ui时间组件只显示当前日期到本月最后一天
需求:在做一个查询的时候,有个按时间查询的条件,显示当前日期到本月最后一天效果预览:代码:<template> <el-form :model="dataU = data01.Content" ref="data01"> <el-form-item style="display:inline-block" label="日期查询范围" prop="StartDate" :label-width="formLabelWidth">原创 2020-07-24 16:23:11 · 1788 阅读 · 2 评论 -
使用Vue,Element-ui导入Excel并预览显示数据,并经数据保存传至后台数据库
需求:基于Vue,Element-ui框架,将本地Excel上传,并将表格中的数据绑定显示在上传页面,并保存提交到后台数据库此功能在做的时候网上有很多的案例,但是都是基于Export2Excel.js文件和Blob.js文件来做的,我做的这个不是这种的,感觉还是比较有难度的,因此做了记录,希望能帮助你首先看下总体的演示效果:废话不多说,先上代码块template中的结构代码 <!--上传文件弹窗--> <!--文件上传组件就不多介绍,Element-UI官网还是比较详细的原创 2020-05-22 16:13:25 · 8151 阅读 · 11 评论 -
Element-ui,Vue表格导出生成Excel表
Vue+Element实现表单数据为Excel表这可能是个经常见到的需求,但是实现还是很容易出问题的,首先看一下模板效果生成的Excel表详情如图在实现这个功能的时候需要两个文件,分别为Blob.js和Export2Excel.js文件,百度网盘下载地址:链接: https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ 密码: qvi7 (有这两个文...原创 2020-02-26 16:48:23 · 1366 阅读 · 1 评论 -
Vue+Elenment+LayUI 修改用户密码
需求:基于Element-UI和LayUI搭建的后台管理系统,除了有权限的管理员手动修改所有人的用户密码以外,需要添加一个自己能修改密码的功能。效果图1:添加修改密码2:点击修改密码弹出el-dialog弹框附上代码1:首先是弹出框的代码 <el-dialog :title="dialogParamsU.title" :visible.sync="d...原创 2019-10-11 10:02:22 · 1300 阅读 · 0 评论