草庐IT

el-date-picker设置日期默认值(当月月初至月末)

 1.ElementUI日期样式2.定义数据以及方法这里面的signDate可以赋值为空字符''或者赋值为空数组[],这里面包含两个值,一个值为开始日期,另一个值为结束日期exportdefault{data(){return{queryParams:{signDate:''},pickerOptions:{shortcuts:[{text:'最近一周',onClick(picker){constend=newDate()conststart=newDate()start.setTime(start.getTime()-3600*1000*24*7)picker.$emit('pick',[s

el-table不显示数据的问题

最近调试用element-ui中的el-table来显示数据,发现无法显示出数据,通过调试,发现后台的数据传到前台了。如图所示: 从网上收集到两种答案都不成功。一种是将element-ui的版本降级。一种是在webpack里面设置一下:vue:'vue/dist/vue.esm.js',原因是说element-ui使用的Vue版本与当前的Vue版本不一致导致的。 resolve:{ extensions:['.js','.vue','.json'], alias:{ '@':pathResolve('../src'), vue:'vue/dist/vue.esm.js', },

设置el-table表头全选框隐藏或禁用

需求:设置el-table表头的多选框隐藏或禁用,网上找的均造成即时生效,但刷新页面时页面会卡顿。 方法1:直接使用css(scoped中)设置:::v-deep.el-table__header-wrapper.el-checkbox{//display:none;//设置不成功,页面卡顿visibility:hidden;}方法2:给el-table设置表头属性header-cell-class-nameleftheaderStyle({row,column,rowIndex,columnIndex}){if(columnIndex===0){return"seltAllbtnDis";}

element ui中的el-input回车键事件

今天项目里面的登录页面,需要按键盘回车键就直接登录,但是测试的时候,按了回车键后,直接刷新页面了,这不是我想要的,之后网上查了一下代码如下:el-inputv-model="form.biz_user_password"placeholder="请输入新密码"@keyup.enter.native="keyUp('form')">el-input>上面的写法没问题,但是这样又会出现一个问题,当form表单中只有一个input框时,按回车键,页面还是刷新的。之后再查了一下,原来form表单只有一个Input框时,回车键默认为表单提交的事件所以最后的解决文案为:el-formref="form":

el-tree使用获取当前选中节点的父节点数据(开发记录)

一、前提官网上有两种办法:根据data或者key拿到Tree组件中的node(data)要获得node的key或者data。我这key设置后没有生效,采用的node获取的方法1、html部分el-treeref="tree":data="treeData"node-key="id":props="defaultProps"@node-click="handleNodeClick">/el-tree>2、data举例data(){ return{ treeData:[{ id:'11',label:'一级1'},{id:'22',label:'一级2',children:[{ id:'221

el-table多选toggleRowSelection不生效?

做弹窗里有个表格多选时,经常遇到再次打开弹窗,已选值赋值不上的问题,这里简单记录一下解决方案。element官方提供的例子经常是有各种问题的,这里经常是toggleSelection不生效toggleRowSelection是用来控制table表格选择框回显的方法,这个方法有两个参数toggleRowSelection(item,true),第一个参数是你准备回显哪一项,也就是表格对应的哪一行,第二个就是那个勾勾,true就是勾选上。一般遇到的业务是,第一次打开选中了,然后有个列表回显选中的值,再有个编辑,点编辑回显选中的,然后就会遇到选中不生效的问题…直接上解决方案:1、赋值前先清空值cle

Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决

由于开发需求,需要在el-table某一列增加popover弹窗,当用户点击按钮时,通过popover组件展示详细信息。参考Element-ui官网文档案例,得出代码如下el-table-columnprop="sip,sip_location"label="源IP"width="150">templateslot-scope="scope">div>{{scope.row.sip}}el-popoverplacement="right"width="500px":visible="IPDetailsPop"popper-class="IPDetailsPopover">IPDetailsre

Element-ui中的el-image的图片预览功能(:preview-src-list)

今天用了element-ui中的图片预览功能,但是它的图片预览功能只能预览事先定义的图片,与我的业务功能完全不符,我的业务功能是在表格上显示多张图片,当点击图片时,就预览当前点击的图片。所以我将其修改了一下,将后端返回的图片依次渲染在页面上;功能就是当点击表格中的某个图片时,这个图片就被放大预览,且图片的显示是以轮播图的形式展现出来。              上面的这段代码与element-ui中的没有区别,唯一的区别就是我设置了一个点击事件click。在下面的js中,定义srcList(也是就是我的evaluatePictureList)变量。:src是显示的图片,我使用v-for来动态创

【UI】elementui el-pagination分页位置靠右

文章目录问题解决问题分页如何实现下面效果,位置靠右以前都是align=“right”,但是饿了么更新版本后将这个方法弃用了解决跳转element-uielement-ui官网,分页的基础用法明确指出->后的元素会靠右显示,也就是说这个箭头符放在哪的前面,那后面的元素就会靠右,想要所有元素靠右的话,就将它放在最前面分页靠右代码el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10,20,30,40]":p

Vue对Element中的el-tab-pane添加@click事件无效

Vue对Element中的el-tab-pane添加@click事件无效发现问题使用element-UI中的el-tabs的时候el-tabsv-model="activeName"@tab-click="handleClick">el-tab-panev-for="iteminproductList":key="item.categoryId":label="item.categories":name="item.categories"@click="tabClick(item.categoryId)">/el-tab-pane>/el-tabs>想给每一个tab绑定事件,并传递id值,但是