草庐IT

el-autocomplete

全部标签

Element plus中el-input 框回车触发页面刷新问题及解决方案

elementUi中input组件回车触发页面刷新问题及解决方案技术:vue3+elementplus的UI框架今天做了一个小小的功能,就是基于elementUi框架的一个输入框,需要监听输入框的回车事件,然后调取接口。代码如下:el-form:model="from":inline="true">el-form-itemlabel="身份证号">el-inputv-model="from.idCard"placeholder="请输入身份证"clearableprefix-icon="Search"maxlength="18"show-word-limitautofocusstyle="wi

vue 2.0+element ui 使用el-upload图片上传

el-upload标签上传图片有两种方式:1、上传图片到服务器上,在数据库中存一个url;(以后迁环境的时候,必须将指定的文件夹一起迁移,比较繁琐2、将图片转为base64形势存放到数据库中;(较低一点很方便)两者在前端img标签中使用src,都可将图片展示出**下面介绍的是第二种方法**使用el-upload将图片加载成Base64格式,通过form统一上传给后端1、创建通用componentImgComponent.vuetemplate>el-uploadclass="upload-demo"action=""ref="upload"list-type="picture-card":au

记录vue项目使用element-ui中日期选择器 (el-date-picker) 出现报错!!!

今天在vue项目中使用elementUI时间组件时候遇到了一个问题在我使用日期时间选择器时,控制台报错!!!!!!一开始我一直以为是我父组件传值到子组件出了问题,但是我这个组件没有传值呀,而且系统流程能真正运行,就是控制台报错了,虽说也不影响什么,但是总是感觉别扭,最后排查发现是因为elementUI的版本有问题,我项目开始用的版本是:“element-ui”:“^2.15.6”,改成"element-ui":“2.15.6”,以后这个问题就解决了亲测可用版本为2.15.6注意前面不要加^符号如果大家遇到这个问题,可以测试一下,希望能帮助到你们

vue vue-element-ui组件 el-menu高度设置

水平展示:外面包个div,再设置属性:代码示例:.home-header-menu.el-menu--horizontal>.el-menu-item{height:50px;line-height:50px;}.home-header-menu.el-menu--horizontal>.el-submenu.el-submenu__title{height:50px;line-height:50px;}divclass="homeHeader-menus-bg"style="margin-top:0px;">el-menurouterclass="el-menu-demo"backgroun

element-ui - 日期选择器el-date-picker 设置禁止选择日期

element-ui-日期选择器el-date-picker设置禁止选择日期使用日期选择器时,有的时候需要禁止选择一些日期,我们可以通过快捷选项picker-options对象中的禁用日期属性disabledDate来设置。el-date-picker v-model="benginEndTime" type="daterange" :picker-options="pickerOptions"range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">/el-date-picker>只能选择今天以及今天之后的日期pi

el-table自定义展开行

根据elementui官方文档说明,展开行需要用到两个属性:row-key和expand-row-keys,还有expand-change事件  在el-table中:row-key="f_ID":expand-row-keys="expandKeys"@expand-change="expandChange" 注意:row-key是数据的唯一标识。template中完整代码如下:展开明细{{scope.$index+1}}解决展开行第一次展开数据不显示问题:在获取数据的时候往数据中追加一个expandRow字段(字段名可自定义)获取数据的时候...this.InfoTableData.for

el-table多选框禁用

el-table多选框有时需要禁用,selectable为true此行数据不禁用,为false则本行禁用判断是否禁用方法函数:el-table-columntype="selection":selectable="selectable"width="40">/el-table-column>methods:{ selectable(row,index){ //unselectableList为需要禁用的数组,需要禁用的数组中与本页数据无相匹配的数据的数据返回true(本行不禁用), //反之返回false(本行禁用)returnthis.unselectableList.findInd

Element-UI中el-tree的使用

写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录一,先简单讲一下怎么安装element-ui:1.安装:npmielement-ui2. 在main.js中引入样式以及组件:importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.丢个官网在这里,详细可以去查看:Element-Theworld'smostpopularVueUIframework二,el-tree常见属性: data----用来展示数据props----树状图配置label-

Element-UI中el-tree的使用

写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录一,先简单讲一下怎么安装element-ui:1.安装:npmielement-ui2. 在main.js中引入样式以及组件:importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.丢个官网在这里,详细可以去查看:Element-Theworld'smostpopularVueUIframework二,el-tree常见属性: data----用来展示数据props----树状图配置label-

ElementUI中的el-date-picker日期选择器的格式转换问题

使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式解决方法一:1、在这个组件后面加上这两个,可以修改格式2、在后端实体类上加上注解即使前端的是string类型,但是通过json自带的格式匹配注解工具,将string转换成LocalDateTime类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")privateLocalDateTimeuserBirthday;解决方法二:用npm下载一个moment.js1、npminstallmoment--save2、在main.js中注册imp