el
el-autocomplete联合@keydown.enter.native回车后下拉框不消失的问题
产生的原因，由于回车太快导致数据还没返回就按下了回车，出现了如上的情况，当前组件已失去焦点，但下拉框依然存在。 解决办法： <el-autocomplete ref="autocomplete" v-model="modelValue" class="inline-input" :fetch-sug ......
elementui el-select设置默认值且默认值不允许删除
参考网址：【记录】el-select 已选项禁止删除 el-select编辑时已选择的项不允许删除 、element-ui里面的下拉多选框 el－select 时，默认值不可删除 在项目中 el-select 设置默认值且默认值不允许删除和取消选中 通过vue全局指令实现该要求 export def ......
element-plus_设置el-table表格自适应高度
# element-plus 设置el-table表格自适应高度 - 目前使用的最佳方案: - 将表格用一个外部容器包裹起来, 通过css来设置外部容器的高度 - el-table表格使用height属性设置为100%高度 - 经测试可以实现效果的代码: - ```vue row.id" > ``` ......
el-dialog的js使用方式
this.$confirm("提交后不允许编辑，是否继续提交？", "提示", { confirmButtonText: "确定提交", cancelButtonText: "取消", type: "warning", }) .then(() => { this.submitForm("ruleFo ......
el-select 回显失败
# 问题 在一个表格中，有多个下拉框，回显应该显示 `label`，但却显示的是绑定的数字。 # 排查 经过测试发现： 1. 排除“绑定值与选项 `value` 不是同一数据类型”的情况； 2. 排除“是多个下拉框导致的bug”情况； 3. 最终确定原因：首次加载下拉框选项显示为空，但实际上下拉框选 ......
el-input输入框添加失去焦点事件
1 <el-input v-model="form.coilId" placeholder="" @blur="coilIdInp(form.coilId, form)" @keyup.enter="$event.target.blur()" /> 1 coilIdInp(coilId: strin ......
对于element的el-tree拖拽最下级子行，会有这行上下行的重影解决方案
例如提的四级这一行，但是提起来后有上下两行的字 解决思路 .tree-row[data-v-a9ac1138] { height: 30px; overflow: hidden; } 找到这行，给这行限制高度，然后隐藏 ......
el-table不出现滚动条
修改样式的时候，发现没出现自己想要的效果，用div重新布局以后，发现效果是出现了，但el-table滚动条不见了。 解决： <div style="padding:2px;height:600px"> <el-table v-loading="loading" :data="list" highli ......
当vue的el-dialog弹窗出现层级问题时，加个:append-to-body="true"
1、当dialog弹窗出现在遮罩层下面时，如这种情况： 2、解决办法就是，加个:append-to-body="true" 属性，效果如下： 。 ......
el-autocomplete后台返回自定义字段展示
<el-autocomplete v-model="form.name" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSe ......
el-input出发回车事件时会导致页面刷新
原因分析：当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 1：el-input上使用回车事件 <el-input v-model="input" @keyup.enter.native="search1"> 解决方法一：在el-form表单加上@submit.native ......
使用element-ui中的el-table回显已选中数据时toggleRowSelection报错
最近在写一个后台，需要在表格中多选，然后点击编辑按钮的时候，需要回显已经选中的表单项 <el-table v-loading="loading" :data="discountList" :row-key="(row) => row.id" ref='multipleTable' @selectio ......
el-table树形数据 + jsPlumb , 批量映射字段
<template> <el-dialog title="映射" append-to-body :visible.sync="mappingShow" :close-on-click-modal="false" :before-close="closeFileMappingDialog" width ......
el-input type为number时，隐藏后面的步进器（箭头）
::v-deep{ .inputFund input::-webkit-inner-spin-button { -webkit-appearance: none!important; } .inputFund input[type="number"]{ -moz-appearance: textfi ......
el-date-picker日期选择框偏移的问题
写表单的时候经常会用到el-date-picker组件，但是时间选择框会偏移位置，这时候只需要在日期选择中添加key就可以了 如下 <el-date-picker popper-class="elDatePicker" size="small" v-model="obj.date_start" ty ......
关于element-ui中的el-drawer每弹出一次，其z-index就要自增1
最近在写一个vue的后台项目，用到了el-drawer，在el-drawer中还嵌套了el-dialog和el-table 然后有时候会发现内嵌的el-dialog会消失不见，就是第一次点击，正常弹出，第二次正常弹出，第三次就不见了，后来发现是被el-drawer盖住了。 于是开始找z-index的 ......
关于 Vue2.0 中 element-ui@2.15.7 中使用 vue-final-modal@2.4.3 弹窗库 出现了 el-cascader 点击外部，popover不隐藏的问题
原因：element-ui 是在 document 上通过监听 mousedown 和 mouseup 事件-来组合判断是否点击的外部【可查看 element-ui 的自定义指令 v-clickoutside】 vue-final-modal 在 .vfm__content dom 上使用 e.st ......
el-input设置自动聚焦this.$refs.xxx.focus is not a function报错
 * https://blog.csdn.net/qq_45821882/article/details/1323 ......
【Element】el-image 预览功能配置
```html ``` 处理数据 ```ts imgList.push(...res.rows); imgList.forEach((item: any) => { item.imageList = [item.image]; }); ``` ......
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
## 现象 el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整 ```html ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/3ef1156885954a4fb5891f69b54f20e4 ......
【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
## 安装依赖 首先，你需要安装 xlsx 和 file-saver 这两个库。 ```bash npm install xlsx file-saver --save ``` 有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。 [xlsx 官方介绍](https://www.npmjs.com ......
Java 14 EL表达式
eljstl.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <h1>首页</h1> <%--指令包含<%@ ......
vue~el-autocomplete实现组件化
# el-autocomplete核心参数 可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。 ## fetch-suggestions 回调列表，异步的方式获取数据列表，显示在列表框中 ## @select 当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将 ......
el-dialog实现拖拽移动
实现原理：利用vue创造一个自定义指令，绑定到需要拖拽移动的el-dialog组件上，在自定义指令中处理弹窗拖拽。 1.utils文件夹下创建dialog-directive.js文件. 注：其中const dragDom = el.querySelector('.el-dialog') || el ......
解决el-button的:focus引起的样式问题
问题描述 当点击按钮时，按钮处于灰色状态，但是鼠标移出按钮，按钮并没有回复成原本的颜色 问题产生原因 在鼠标点击按钮后，按钮处于:focus状态 // element的源码.el-button:focus,.el-button:hover { color: var(--el-button-hover ......
elementUI使用el-uplaod上传多个图片并删除部分图片
前端界面： <el-form-item label="商品轮播图" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]" prop="images"> <el-upload ref="upload" :action=we ......
el-tree 折叠节点时去掉 defaultExpandedKeys 中已折叠的节点及其子节点
# 问题场景 树形节点默认是全部折叠的。展开节点A，再把它折叠。然后给节点B新增子节点，新增成功后刷新树，却发现节点A是展开的。 # 原因分析 **树刷新后全部节点都默认是折叠的，除非 `defaultExpandedKeys` 数组中有数据（这些节点数据是展开的）。** 因此，只需要在折叠节点A时 ......
elementUI——el-input阻止输入后回车清除输入值，且提交表单
参考： 1.键盘回车事件导致页面刷新的问题vue+element https://blog.csdn.net/weixin_47560716/article/details/128820592?utm_medium=distribute.pc_relevant.none-task-blog-2~de ......
element-plus的el-select在切换时报ResizeObserver loop completed with undelivered notifications错的一种可能原因及解决方案
报错场景：`el-select`放在了table的td里，我做的是根据el-select切换的动态表格。切换时就会报此错误。 原因分析：分析发现，本场景在切换select时，其所在单元格尺寸发生了变化（因为我没有定表格内单元格的尺寸）。 解决方案：保证el-select所在单元格尺寸不发生变化即可。 ......