草庐IT

el-autocomplete

全部标签

element-ui中的el-table实现分页多选功能

element-ui中的el-table实现分页多选功能一、分页多选1.在el-table中添加:row-key="getRowKeys"2.然后第一列,即有多选框的一列,添加:reserve-selection="true"selection-change事件:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空)一、分页多选1.在el-table中添加:row-key=“getRowKeys”el-tableref="form":model="form":row-key="getRowKeys"@selection-change="handleChange">/el-tab

设置输入框el-input图标 / el-input表单只显示number

设置输入框el-input图标如果你在使用element-ui自定义插件的时候,想保持和element风格一致,需要用到输入框,并且里面有icon小图标,不需要自己手写样式,可以通过下面2种方法实现方法1:el-form-itemlabel="图标在前">el-inputv-model="form.name1"prefix-icon="el-icon-search"/>/el-form-item>el-form-itemlabel="图标在后">el-inputv-model="form.name2"suffix-icon="el-icon-date"/>/el-form-item>方法2:e

【学习记录21】Vue+ElementUI el-upload多文件上传,一次请求上传多个文件!

前情回顾说点废话。。。1、项目当中遇到需要上传多个图片,一次选取多个图片。但是吧el-upload默认只能一个一个传,每次上传成功还的自己去push,一个一个去判断。2、关键是后台给的接口,要一次性接收一堆,无奈之下只能去网上搜索,大佬们都是给的代码片段无法直接使用。3、经过各种搬运后实现了效果,闲下来就想着自己写一下我最后在代码中实现方法吧。大家共同学习进步,我也巩固一下知识点!有问题的地方欢迎各位大佬指正!话不多说直接撸代码!!!html部分//:auto-upload="false"这一句必须加上,阻止默认上传事件//:http-request="BSuploadFile"上传到服务器的

使用Vue + el-form + rules实现图书信息录入功能实战

前言 上节回顾转眼2023年已经过去一半了,我咋记得2022年刚过去呢,有时候在前端打版本的时候我还不小心写成2022啥啥啥呢,写完才发现自己自己写错了,应该是2023,真是时光一去不复回,往事只能回味啊。上一节为了给图书录入功能模块打基础,单独写了一篇Vue+FormData+axios的博客,我们通过对上传图片的DOM布局,上传事件的注意事项,还有在图片上传功能中,axios是如何支持的,做了讲解,不明白上下文的小伙伴可以回过头去看一看: 使用Vue+FormData+axios实现图片上传功能实战本节介绍这一小节是本专栏

elementui 分页器,el-pagination 不显示的问题

今天敲代码遇到了个很操蛋的问题,我把分页器封装成共用组件,一个组件显示分页器,另一个组件不显示分页器,我心想这么邪门的吗,这个是正常组件这个组件不显示然后我尝试把传给分页器的参数打印出来,果然发现了操蛋的地方,这是正常显示的数据这是不显示的数据total和pageSize的结果是null,所以导致分页器不显示,经排查发现是后端返回的接口这两条数据为null导致的,微调之后恢复正常总之,就是分页器所依赖的数据不能为null,为null就会导致一整个分页器不显示

element ui el-tree控制树形结构全选、取消全选,展开收起

控制树形结构全选、取消全选,展开收起   折叠/展开 全选 清空 exportdefault{methods:{ //this.$refs.treetree是上面控件el-tree的ref属性的值 allExpanded(){ //展开还是收起 this.expanded=!this.expanded; vartreeNodeList=this.$refs.tree.store._getAllNodes(); for(vari=0;i

vue+el-upload 上传图片和视频小总结

一、图片下标,判断,base64,获取img标签等问题上传图片时用到的accept只会在用户点击上传时添加一个自定义文件类型,如添加了accept=".jpg,.png,",虽然会呈现出符合条件的文件,但用户仍可以通过点击所有文件类型来上传其他类型的文件,此时设置before-upload函数,参考el-upload上传组件accept属性限制文件类型(案例详解)_辰兮要努力的博客-CSDN博客_el-uploadaccept 结果只有accept在生效,ElementUIel-upload上传图片限制,before-upload不生效问题_老电影故事的博客-CSDN博客_beforeuplo

vue+el-upload 上传图片和视频小总结

一、图片下标,判断,base64,获取img标签等问题上传图片时用到的accept只会在用户点击上传时添加一个自定义文件类型,如添加了accept=".jpg,.png,",虽然会呈现出符合条件的文件,但用户仍可以通过点击所有文件类型来上传其他类型的文件,此时设置before-upload函数,参考el-upload上传组件accept属性限制文件类型(案例详解)_辰兮要努力的博客-CSDN博客_el-uploadaccept 结果只有accept在生效,ElementUIel-upload上传图片限制,before-upload不生效问题_老电影故事的博客-CSDN博客_beforeuplo

element-ui 修改el-form-item样式

文章目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改buttonform结构el-form:model="formData"label-width="80px">el-form-itemlabel="label1">el-inputv-model="formData.value1">el-input>el-form-item>el-form-item>el-buttontype="primary"@click="onSubmit">提交el-button>el-button>取消el-button>el-form-item>el-f

element-ui 修改el-form-item样式

文章目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改buttonform结构el-form:model="formData"label-width="80px">el-form-itemlabel="label1">el-inputv-model="formData.value1">el-input>el-form-item>el-form-item>el-buttontype="primary"@click="onSubmit">提交el-button>el-button>取消el-button>el-form-item>el-f