虎康的博客

如下图，由于背景的原因，可以看出展示的文字不是很清楚，因此需要自定义一下文字字体大小和文字颜色。找到对应的class。

如图，我们在 Utils.js文件夹下封装了自定义的方法，想要把它们注册到全局都可调用的状态，该怎么做呢？Vue3 中当我们想要把某个自定义方法放在全局，应该如何定义和使用。

在 Element Plus 的 el-form 表单组件中，如果你想要去掉 el-input 组件的外边框，只保留下边框，可以通过 CSS 来实现。这通常涉及到修改 el-input 的默认样式。如图所示，自定义 el-input 的边框。

element el-tree直接行内编辑时阻止冒泡触发node-click事件。

elementPlus中的tooltip，默认挂载在body下，使用fullScreen进行全屏后，查看弹框，发现其实提示弹框是正常加载的，但是挂载在body下： 查看tooltip文档说明，发现有属性设置提示内容附加在哪一个元素上，而翻看源码可知，默认会创建一个div放置，而这个div又会挂载在body上 而全屏时，fullscreen的并不是整个body，所以导致无法正常展示提示信息，所以需要将提示信息绑定在fullscreen进行全屏的元素的内部，那么就可以利用append-to进行设置。

【代码】级联选择器 el-cascader。

上一年上个月<el-button size="small" @click="selectDate('today')">今天</el-button>下个月下一年// date 是切换后的日期，根据这个日期来计算开始日期和结束日期// 开始日期// 结束日期//根据开始日期和结束日期来查询数据，然后更新视图// ...

直接引入日历组件后，都是英文，应该如何把头部英文改为中文。因此，只需要在代码中加入这么一段就可解决，在。中我们可以看到这么一段话，

arco-design 暂时无法实现该需求，所以继续使用了 elementPlus 的解决方案。upload 上传文件后在下次弹框打开时清空上次上传的内容。

使用工具进行检测：如果你无法确定是哪个部分导致了重复键的问题，可以考虑使用调试工具或打印日志来跟踪数据处理过程，找出重复键出现的具体位置。确保每个键都是唯一的。在开发中，确保数据结构中的键是唯一的是非常重要的。一旦找到导致重复键的原因，对数据结构或代码逻辑进行调整，确保不再出现重复键的情况。要解决这个问题，你可以检查你的数据结构或代码逻辑，确保在处理数据时不会出现重复的键。经过排查，是因为在代码中绑定的 key 是数据返回的 id，而返回的 id 值有相同，因此出现报错情况。

【代码】elementui 中 el-date-picker 控制选择当前年之前或者之后的年份。

在使用 el-date-picker 做只选择年份的控制器时，出现如下问题：el-date-picker选择年后输出的是Wed Jan 01 2025 00:00:00 GMT+0800 (中国标准时间)，输出了两次如下。

进行自定义表单校验时，出现点击编辑按钮之后再带年纪新增按钮，出现如下情况，新增弹出表单进行了一次表单验证，而这时不应该要表单验证的。在寻找多种解决方案后，最后用的方法时在打开弹窗第一次取消校验规则，这里我使用的是el-dialog的@open和@close来处理。需要注意的是要在清除方法外面用$nextTick处理一下在DOM渲染完成后在操作。不然会有问题，如果不需要清除的话可以不调用回调方法。在使用 Element-ui。

javascript复制代码//自定义指令：实现element-ui对话框dialog拖拽功能。1.在utils文件创建dialogdrag.js文件，自定义指令。3.在使用el-dialog组件中添加。实现可拖拽的 el-dialog。2.在main.js全局注册组件。

element-plus表格判断table中的数据是否换行展示，如果换行展示，替换为…

对表格中的数据进行本地分页，不调用接口。

对于 element-plus 中的 table 进行表头和内容的居中显示。

vue3 项目中 使用UI组件库 ElementPlus 时，table 中嵌入 input输入框。

自定义 选择框的下拉框的样式和输入框。

如下图所示，在点击弹出弹框后，支持如下需求。

实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。具体做法是设置‘showClose‘为false，并使用‘this.message返回的Message实例的close`方法手动关闭提示信息。在这个示例中，当消息弹出后，我们通过document.body.addEventListener绑定了一个全局的点击事件，当点击页面上其他任意地方时，会关闭提示信息。elementui 实现弹框一直展示，在点击其他位置时再关闭（或可手动关闭）实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。

需求分析。

在我们日常开发中，会有文件的导入导出的需求，如何在 vue 项目中写导入导出功能呢。以 Excel 表格数据导出为例。

【代码】accept 上传类型限制整理。

上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 (uploadFile: UploadFile, uploadFiles: UploadFiles) => void。文件上传失败时的钩子 (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void。

在进行Table的单元格合并的时候，出现了bug：合并第一列的第 x 和 x+1 行时，第x+2行的数据被第二列的数据替换，之后表格中的数据均向前移动了一格，导致数据展示错乱。在进行单元格合并时，未考虑到动态合并单元格，导致合并单元格的方法每次遍历rowIndex行索引时错乱，未能成功识别x+1的行索引，产生了错误。

【代码】element select 选择器 选中框中显示不了选中的值。