![](https://img-blog.csdnimg.cn/20210622105347922.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
element-ui
element-ui组件总结
程序媛_MISS_zhang_0110
前端晋级者
展开
-
el-input中change事件造成的坑
仅在输入框失去焦点或用户按下回车时触发。原创 2024-06-04 10:23:10 · 424 阅读 · 0 评论 -
vue2.0项目中组件的封装和使用
【代码】vue2.0项目中组件的封装和使用。原创 2024-05-27 11:43:38 · 179 阅读 · 0 评论 -
el-tree默认高亮和默认展开
【代码】el-tree默认高亮和默认展开。原创 2024-05-27 11:11:45 · 167 阅读 · 0 评论 -
el-calendar如何判断点击的是上个月、今天、下个月
【代码】el-calendar如何判断点击的是上个月、今天、下个月。原创 2024-05-21 10:32:26 · 285 阅读 · 0 评论 -
el-upload上传附件,如何限制附件类型和附件大小
【代码】el-upload上传附件,如何限制附件类型和附件大小。原创 2024-05-10 14:53:47 · 354 阅读 · 0 评论 -
el-upload组件如何上传blob格式的url地址视频
el-upload是Element UI中用于文件上传的组件,通常用于上传本地文件。如果需要上传url地址而不是本地文件也是可以的,需要自己封装一下。原创 2024-04-22 17:38:08 · 474 阅读 · 1 评论 -
el-tree树形控件默认选中当前并高亮
【代码】el-tree树形控件默认选中当前并高亮。原创 2022-06-10 16:36:31 · 2075 阅读 · 0 评论 -
el-date-picker时间范围只能选五分钟之内
【代码】el-date-picker时间范围只能选五分钟之内。原创 2023-07-24 15:36:23 · 1318 阅读 · 0 评论 -
el-select多个选择框位置错位、偏移
在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。原创 2023-07-25 17:08:13 · 2378 阅读 · 0 评论 -
element-ui中的el-table实现分页切换连续多选功能(切换分页,保存上一页勾选的)
第一页勾选两个,切换第二页,勾选三个,目的:总共勾选五个。原创 2024-01-04 14:11:12 · 846 阅读 · 1 评论 -
el-input文本域如何设置不可以拉伸
【代码】el-input文本域如何设置不可以拉伸。原创 2024-01-04 11:12:49 · 761 阅读 · 0 评论 -
el-upload上传附件预览只能上传一个,上传玩没有+号
实现原理是通过控制css显隐hideUpload 字段。原创 2023-11-13 10:07:29 · 424 阅读 · 0 评论 -
element-ui中使用el-cascader实现全选功能
【代码】element-ui中使用el-cascader实现全选功能。原创 2023-05-05 15:00:34 · 2309 阅读 · 1 评论 -
element-ui中的el-table实现分页多选功能
selection-change事件:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空)原创 2023-05-05 13:48:35 · 6919 阅读 · 4 评论 -
el-dialog子组件在mounted周期内获取不到dom?
正常父子组件在mounted生命周期内可以获得dom父created—子created—子mounted—父mounted----子updated—父updated。原创 2023-03-08 14:38:56 · 1301 阅读 · 1 评论 -
el-tree和el-popover结合及阻止popover的点击事件
【代码】el-tree和el-popover结合及阻止popover的点击事件。原创 2023-03-03 15:58:58 · 1312 阅读 · 0 评论 -
表单验证 el-form-item里面验证两个el-select 必填如何验证
【代码】表单验证 el-form-item里面验证两个el-select 必填如何验证。原创 2022-11-23 14:00:05 · 2013 阅读 · 2 评论 -
v-show控制el-table中的列不生效
列表中有一列是内容,内容不同点击弹框,弹框出现的el-table中列不同,控制不同弹框显示不同的列,如果用v-if可以实现,用v-show不行。v-if切换标签显示隐藏时,多个相同的标签被渲染,需要使用key来区分,否则就会出现多个复用的情况。而因为td的display: table-cell;权限高于display:none,v-show起作用的本质是display:none,后台管理系统vue2.0+element-ui。所以v-show失效;原创 2022-09-23 16:21:35 · 1359 阅读 · 0 评论 -
el-upload上传文件缩略图之---查看、下载、删除
【代码】el-upload上传文件缩略图之---查看、下载、删除。原创 2022-09-19 10:04:53 · 3555 阅读 · 0 评论 -
element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码
1.使用element中el-input自带的属性auto-complete(版本二可用),但是值不能按照官网而要改成new-password。2.使用el-input组件的只读属性(是否)readonly,开始要input框为只读,readonly = “true”。3.注册聚焦事件focus,控制readonly的属性值(true,false)。原创 2022-09-13 17:52:31 · 3035 阅读 · 0 评论 -
el-upload上传图片之前压缩图片
代码】el-upload上传图片之前压缩图片。原创 2022-08-17 15:44:58 · 1745 阅读 · 0 评论 -
element-ui 解决循环出多个el-popover点击其中一个则其它都关闭
element-ui解决循环出多个Popover点击其中一个则其它都关闭原创 2022-06-10 16:28:34 · 4144 阅读 · 0 评论 -
element ui 中el-table中使用v-if造成组件复用问题---之---el-table 中使用el-popover 无法弹出问题
表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,所以,通过column-key去标识一下当前行是唯一的,不许复用就行了。本人猜测是:v-if会导致updated生命周期执行,会覆盖上面的v-if的生命周期,导致上次的生命周期后的逻辑触发不了但是是错误的,不管是v-if还是v-show生命周期是一样的。在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。原创 2022-06-06 10:16:04 · 1505 阅读 · 0 评论 -
el-tree选择限制(只能三级单选el-checkbox多选框)及节点默认展开和默认选中
element ui树形控件节点选择限制(只能三级单选)效果图一、主要代码效果图一、主要代码 <el-tree :data="dataTree" :props="defaultProps" node-key="id" highlight-current ref="dataConfigTree" :expand-on-click-node="false" accordion原创 2022-05-23 11:51:27 · 3337 阅读 · 0 评论 -
el-cascader自定义节点内容 一级二级加不同的标签
级联选择器一级二级加不同的标签一、效果图二、主要代码数据结构一、效果图二、主要代码 <el-form-item label="办事处:" prop="officeNameArr"> <el-cascader :options="options" :props="{ multiple: true}" :style="'width:'+this.$store.state.FormInputWidth.elFormItemWidth+'p原创 2022-05-05 18:02:40 · 2534 阅读 · 0 评论 -
el-table表格中添加单选框及打开新页面
这里写目录标题一、效果图二、主要代码三级目录一、效果图二、主要代码 <el-dialog title="选择" :visible.sync="dialogTableVisible" class="classAddDialog"> <el-table :data="form.sourcesByTitle" border style="width: 800px" > <el-table-column property="id" lab原创 2022-05-05 17:02:17 · 1752 阅读 · 0 评论 -
el-cascader级联选择器实现一级二级单选三级多选,选中未显示
【代码】el-cascader级联选择器实现一级二级单选三级多选,选中未显示。原创 2022-05-05 16:52:01 · 3910 阅读 · 7 评论 -
el-tree树形控件修改节点图标
element-UI tree树形控件 修改小三角图标和选中高亮一、代码一、代码 <el-tree :data="dataTree" :props="defaultProps" node-key="id" highlight-current ref="dataConfigTree" :expand-on-click-node="false" accordion nodeChange.is原创 2022-02-18 13:21:49 · 2592 阅读 · 4 评论 -
el-table中单元格添加el-tooltip
element中table单元格添加tooltip一、代码一、代码 <el-table-column prop="adjustFinancialIncome" label="调整财务收入" min-width="150" :render-header="renderHeader" ></el-table-column> renderHeader(h, { column, $index }) { //原创 2022-01-24 10:14:06 · 3376 阅读 · 0 评论 -
el-select(全部)小技巧
el-select(全部)小技巧一、常规写法二、好用版本一、常规写法 <el-form-item label="付费类型:"> <el-select v-model="productForm.spFeeType" placeholder="请选择" > <el-option v-for="item in stateOptions"原创 2022-01-24 09:57:17 · 1085 阅读 · 0 评论 -
el-form表单双层验证和自动验证的bug
element-ui表单双层验证和自动验证的bug一级目录二级目录三级目录一级目录二级目录三级目录原创 2021-12-15 09:39:25 · 1843 阅读 · 0 评论 -
el-form中表单赋值无法响应式
elementui中表单赋值无法响应式一、背景二、项目代码一、背景表单el-form-item中的v-model初始化复制,然后在页面输入框修改值时候,修改不了二、项目代码 <el-form-item label="企业编号:"> <el-input placeholder="请输入企业编号" v-model="productForm.spCode" ></el-input&g原创 2021-11-26 13:49:56 · 1511 阅读 · 0 评论 -
el-date-picker中日期选择器时间限制,限制选择30天时间范围且不大于当前时间 ; 时间范围只能选择1天;时间范围在某一段时间内
【代码】element-ui中日期选择器时间限制,限制选择30天时间范围且不大于当前时间;时间范围只能选择1天;时间范围在某一段时间内。原创 2021-11-12 16:38:28 · 6945 阅读 · 4 评论 -
el-form表单自定义规则导致-validate不能执行
{内容,8}{([\u4E00-\u9FA5]|[1-9]| |[a-z]){1,4}(,|,){1}\d*}{内容} {([\u4E00-\u9FA5]|[1-9]|[a-z]|\d| ){1,3}{内容,8}和{内容}来区分。原创 2021-10-27 14:07:33 · 1560 阅读 · 0 评论 -
elementui的日期时间选择器的icon位置调整
elementui的时间选择器的icon位置调整一、左侧icon隐藏,右侧icon添加class时间选择器默认icon在左侧,现在想把icon跳转到右侧一、左侧icon隐藏,右侧icon添加class<el-date-picker v-model="dateRange" type="daterange" :clearable='false' range-separator="-" start-placeholder="开始日期" en原创 2021-10-18 13:17:26 · 5932 阅读 · 0 评论 -
element-ui中el-checkbox多选框中indeterminate 全选状态深入理解
element-ui中Checkbox多选框中indeterminate 全选状态深入理解单选框后只有非一个字段如果每一个单选框后只有一个字段,参考element-ui单选框后只有非一个字段提示一下:单选的每一项和列表中每一项是否相等,需要进一步进行处理 <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <div v-for="(item原创 2021-07-28 15:49:17 · 2121 阅读 · 3 评论 -
解决el-carousel跑马灯(只有两个轮播)loop的循环方向问题解决
vue+Element 跑马灯loop的循环方向问题解决)1.element和swiper的跑马灯对比起来,如果是用vue的话,使用element的跑马灯是非常方便的,但是功能并没有swiper多,如果你想使用跑马灯的loop功能,个人建议千万不要用swiper,如果你只是loop图片,那其实还好,如果loop的数据结构稍微复杂点,能坑死你(针对vue项目,因为在swiper的跑马灯中是不能使用子组件的,而且dom元素上的所有点击事件全部失效,只能通过他自带 的click回调函数操作,非常麻烦,而且原创 2021-02-26 14:49:47 · 5013 阅读 · 2 评论