vxe-table 在 vxe-tabs 页签组件中使用表格
在 vxe-tabs 页签组件中使用 vxe-table 表格组件，自适应页签高度。 官网：https://vxetable.cn/ <template> <div> <vxe-tabs padding> <vxe-tab-pane title="页签1" name="1"> <vxe-grid v ...
获取剪切板的图片 -> File -> Base64 -> Blob -> url -> Image，以及它们之间的各种相互转换
写在开头 点赞 + 收藏 学会 一、获取剪切板的图片（拿到 File 对象） js粘贴事件paste简单解析及遇到的坑 - 云+社区 - 腾讯云 (tencent.com) document.addEventListener('paste', function(event) ...
Nuxt.js 应用中的 error 事件钩子
title: Nuxt.js 应用中的 error 事件钩子 date: 2024/12/3 updated: 2024/12/3 author: cmdragon excerpt: 在任何 Web 应用中，错误是不可避免的。无论是网络请求失败、服务器错误、还是用户输入不合法，这些错误都可能影响用户 ...
vxe-table 列宽拖拽模式设置，自适应列宽，固定列宽
在使用 vxe-table 是，常用的列宽拖拽调整功能，通过列宽调整可以让用户灵活的自定义列宽。两种拖拽调整列宽模式分别用于不同场景。 动态列宽分配模式 调整列宽之后，对于未设置列宽的列会重新动态分配剩余宽度 <template> <div> <vxe-grid v-bind="gridOption ...
qiankun 的 CSS 沙箱隔离机制
Qiankun 提供了三种 CSS 隔离机制：动态样式隔离、影子DOM 沙箱和作用域沙箱，以实现主应用和子应用之间的样式隔离...... ...
面试官：来谈谈Vue3的provide和inject实现多级传递的原理
前言 没有看过provide和inject函数源码的小伙伴可能觉得他们实现数据多级传递非常神秘，其实他的源码非常简单，这篇文章欧阳来讲讲provide和inject函数是如何实现数据多级传递的。ps：本文中使用的Vue版本为3.5.13。 关注公众号：【前端欧阳】，给自己一个进阶vue的机会 看个d ...
【测试平台开发】一步步教你vue-cli创建项目学习教程
使用vue-cli创建Vue项目是一个相对简单且高效的过程。以下是一个详细的步骤指南，帮助你通过vue-cli创建Vue项目： 一、安装Node.js和npm Vue CLI依赖于Node.js环境和npm包管理器。因此，在创建Vue项目之前，你需要确保计算机上已安装Node.js和npm。 访问N ...
Nuxt.js 应用中的 close 事件钩子
title: Nuxt.js 应用中的 close 事件钩子 date: 2024/12/2 updated: 2024/12/2 author: cmdragon excerpt: close 钩子在 Nuxt.js 的 Nitro 模块生命周期中起着重要的作用。当 Nitro 关闭时，这个钩子会 ...
记录---前端实现画中画超简单，让网页飞出浏览器
写在开头 点赞 + 收藏 学会 Document Picture-in-Picture 介绍 今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？ � ...
（系列十三）Vue3+Echarts搭建超好看的系统面板
说明 该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。 该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。 说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。 友情提醒：本篇文章是属于系列文章，看该 ...
vxe-table 设置斑马线条纹样式
使用 vxe-table 设置斑马线条纹样式，通过设置 stripe 参数，如果是树结构的数据，需要注意是否开启 tree-config.transform 平级结构才能支持；还可以通过 css 变量控制对应的颜色，支持全局或者局部修改颜色值 官网：https://vxetable.cn Gitee ...
vxe-table 树形表格序号的使用
vxe-table 树形结构支持多种方式的序号，可以及时带层级的序号，也可以是自增的序号。 官网：https://vxetable.cn 带层级序号 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa ...
Element-Plus表格：Table自定义合并行数据的最佳实践
“ 知行合一 ” —— 王阳明 在开发项目中，我们时常会用到表格，许多需求可能会要求自定义特定的行或列。 接下来，我们将探讨在实际开发中如何应对这一挑战。 本文案例采用的技术： 名称 版本 Vue3 ^3.5.12 element-plus ^2.8.8 知识点 我们先来复习下2个知识点，来自ele ...
Nuxt.js 应用中的 render：island 事件钩子
title: Nuxt.js 应用中的 render：island 事件钩子 date: 2024/12/1 updated: 2024/12/1 author: cmdragon excerpt: 在 Nuxt.js 中，render:island 钩子允许开发者在构建“岛屿”HTML之前进行处理 ...
【3分钟学会】一招禁用表单中input输入框回车键自动触发提交事件！
本文旨在探讨如何在Web开发中处理Form表单的input输入框，特别是如何通过编写代码来禁用用户按下回车键时自动触发的表单提交事件。这涉及到理解表单事件处理机制，以及如何使用JavaScript或HTML属性来阻止回车键默认行为，从而增强用户体验和表单的功能性。 ...
vxe-table 可编辑表格使用下拉树
vxe-table 可编辑表格使用下拉树 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { const regionEd ...
vxe-table 树结构单元格选取与复制粘贴
vxe-table 树结构单元格选取与复制粘贴，通过 tree-config.transform 使用树形表格 <template> <div> <vxe-table border show-overflow keep-source height="600" :column-config="colu ...
Input报错“Form elements must have labels: Element has no title attribute Element has no placeholde”
写表单，无需 label 标签，只需给 input 添加 title 或 placeholder 任一属性，即可消除浏览器后台管理的Error~ ...
Nuxt.js 应用中的 render：html 事件钩子
title: Nuxt.js 应用中的 render：html 事件钩子 date: 2024/11/30 updated: 2024/11/30 author: cmdragon excerpt: 在构建 HTML 内容时，能够对其进行动态修改是非常有用的。render:html 钩子为开发者提供 ...
vxe-table 树形表格的用法详解
vxe-table 树形表格的使用，支持多种数据结构，可以是带有父子结构的数组，也可以带有层级结构的嵌套数据。 官网：https://vxetable.cn Gitee 带有父子结构的平级数据 只需要带有父子结构的平级数据，例如：id 和 parentId，字段名可以任意设置。对于保存到数据库的平级 ...