日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

【代码】【Element】vue3+element-plus 去掉 el-dialog 的遮罩，并且可以操作底层区域。

点击编辑按钮，修改表格行状态，显示输入框，前置需要在表格添加一个管理编辑的状态，点击编辑修改状态，更新视图。element表格当前行数据，属性修改；无法更新视图，是由于table监听的是一行数据，而不是某个单元格属性。上面的三个参数分别是：data是表格的数据源,index是修改row当前行的索引，row是改后的数据。类似的问题：如给当前行row,添加或者删减，字段属性；都可以用$set方法处理；set()方法，既可以新增属性,又可以触发视图更新。这里需要我们主动触发页面更新，可以用到。

【代码】【Element】el-descriptions 的 el-descriptions-item 内容超出显示...省略号。

/ { bs_name: "chrome浏览器", bs_tag: "chrome", bs_version: "108.0.0.0" },'当前浏览器版本过低，部分功能不可用，请更新火狐浏览器版本（不低于100.x版本）'// document.documentElement 是全局变量时。// 获取 css 变量。// 设置 css 变量。// 监听浏览器版本。

/ 正则表达式 /[^\d+-]/g 只允许数字和加号减号，你可以根据你的需求调整这个正则表达式。// 使用正则表达式检查输入值，只允许数字和特定符号。

虽然 el 官方提供了组件但是缺不支持el-table组件，这就很难受了，还好已经有大佬写好了插件，并且支持组件的所有选项。

但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。

个人样式，可以参考，主要是去掉边框、缩放图标和高度问题。

【代码】【Element】去除 el-dropdown 暗黑模式下的下划线。

首先需求是点击行显示展开行。这个时候不需要展示箭头了。点击行展开行，隐藏箭头。

.el-cascader-panel { .el-radio { width: 100%; height: 100%; z-index: 10; position: absolute; right: 0; } .is-disabled { // 不允许选中样式 cursor: not-allowed; } .el-ra...

【代码】【Element】el-image 预览功能。

/ 鼠标放上去，停止滚动；

import { ElLoading } from "element-plus";LoadingInstance = ElLoading.service({ background: "rgba(0, 0, 0, 0.7)", customClass: "ElLoading_class",});// 主页面自定义加载动画 (按照自己需求修改).ElLoading_class .el-l...

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。e.target.result 结果...

效果代码参考博客推荐看这个来配置elementUI环形进度条设置渐变色和修改底色

可将 el-tooltip 内的 el-button 外层包裹一个容器，如下:

问题描述el-form-item 使用 label 插槽放入 el-tooltip 不显示(未使用 label-width 和 label-action 属性的情况下)。解决方法将标签的样式修改，去掉浮动。成功！！！...

el-option 上绑定的 value 为对象(item)，select 上面的 value-key 以 :key 的值作为唯一标识。

$--group-option-flex: 0 0 math.div(1, 5) * 100% !default;解决方法把 node_modules 和 package-lock.json 删除，再重新 npm install 就可以了。

在调整 el-select 或者 input 高度，比如.el-input__inner { width: 272px; height: 32px; border: 1px solid #e0e0e0 !important;}成功之后，el-select箭头错位，情况类似如下图解决方法恢复el-input__icon的height原属性，同时借助相对定位完成位置移动。.el-i...

原因是因为表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，通过key去标识一下当前行是唯一的，不许复用，就行了。在其和其之后的一个显示的组件上添加 :key="Math.random()"<el-table-column :label="$t('customer.name')" pr...

上传文件手动上传<el-upload class="add-upload" ref="add-upload" drag action multiple :auto-upload="false" :file-list="f...

vue可以使用::v-deep<style lang="scss" scoped>::v-deep .el-main { // 修改ui组件默认样式}

问题就是多渲染表单使用同一个重置方法，如下：resetForm(roleForm) { this.$refs[roleForm].resetFields()}导致所有表单重置数据均是第一次获得的表单数据解决方法给表单添加v-if，在显示的时候，进行表单的销毁和重建，强行让每一次打开表单，改操作拿到的数据为当前表单的初始数据。参考如下：...

在做电商后台管理系统项目事遇到的问题，可能视频是去年的，element现在已经是新版本了，有些地方修改了，从而导致了以下问题级联选择器的位置不对解决的方法就是在全局css中添加以下代码：.el-cascader-menu { height: 300px; }完美解决！！！...

在全局css样式中添加以下代码即可：body .el-table th.gutter { display: table-cell !important}