![](https://img-blog.csdnimg.cn/20210417162541249.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 87
Vue 只关注视图层, 采用自底向上增量开发的设计;目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
觉醒法师
勤学习、干实事。
展开
-
ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
在使用element-ui中,会发现表格组件el-table在未指定宽度情况下,会自动计算并给表格宽度赋值。但实际开发中,有时需要根据内容实际长度自动撑开显示,由内容的多少而决定表格的宽度,而不是默认宽度为100%。在默认情况下表格宽度为100%显示,并且列项未指定宽度情况下,剩余部分会平均分配宽度,本案例实际需求是由内容自动撑开显示。componentUpdated原创 2024-07-03 21:10:53 · 1520 阅读 · 0 评论 -
Element-UI - el-table中自定义图片悬浮弹框 - 位置优化
该篇为前一篇“Element-UI - 解决el-table中图片悬浮被遮挡问题”的优化升级部分,解决当图片位于页面底部时,显示不全问题优化。Vue.directive钩子函数原创 2024-07-02 12:11:37 · 700 阅读 · 0 评论 -
Element-UI实现el-dialog弹框拖拽功能
在实际开发中,会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的,这极大方便用户的操作。在查看Element-UI中弹框(el-dialog)组件的文档说明后,发现并未实现这一功能,不过也无须担心,vue中提供了Vue.directive钩子函数,可以从底层操作DOM来实现并升级弹框的拖拽功能。原创 2024-06-17 15:58:57 · 1845 阅读 · 2 评论 -
Element-UI - 解决el-table中图片悬浮被遮挡问题
在开发中,发现element-ui在el-table中添加图片悬浮显示时,会被单元格遮挡的问题。通过查询得到的解决办法,大多是修改.el-table类中相关样式属性,但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难,将悬浮图片放在body节点下,通过定位显示即可。所以对于此问题,将通过Vue.directive钩子函数,自定义弹框来实现。原创 2024-06-16 20:09:24 · 1130 阅读 · 4 评论 -
Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题
在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的组件修复定位问题,经过网友不断发现和提问,原来不同组件解决方案是不同的,这讲解下 组件如何修复。接下来我们讲下select组件的popper弹框错位问题。原创 2024-01-15 16:48:53 · 1231 阅读 · 1 评论 -
Vue中ElementUI结合transform使用时,发现弹框定位不准确问题
查看element-ui官方文档无果后,打算更换新的框架进行开发,但更换几个后发现都存在类似问题,由于之前项目都是使用element-ui,对此框架比较熟悉,所以还是决定在此基础解决问题。在近期开发中,需要将1920*1080放到更大像素大屏上展示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。如果屏幕像素更大,则偏移位置更远,对此element-ui文档中常规手段已无法解决,只能从底层考虑。原创 2023-08-23 17:29:38 · 2921 阅读 · 6 评论 -
Vue中data没有写return报Cannot read property ‘__ob__‘ of undefined错误
最近需到一个在开发中很常见错误,原因是自己开发时没仔细检查代码,删除数据时把data中return一并删除了,导致路由跳转点击无反应。data函数在Vue中是一个特殊的方法,用于定义组件的本地状态。经翻阅相关文档,了解到它应该返回一个对象,该对象包含在组件中使用的各种数据属性。如果您的data函数没有返回任何东西(或者返回null或一个非对象值),那么您可能会看到类似的错误消息,指示数据未定义或未预期的类型的错误。确保您的data函数始终返回一个对象,以包含您需要在组件中使用的数据属性。原创 2023-07-30 20:08:58 · 608 阅读 · 0 评论 -
LAY-EXCEL实现导入和导出excel功能
lay-excel 提供了丰富的数据表格类型,包括常见的表格、表格拆分、表格计算、图表等等,可以满足用户多样化的数据表格需求。此外,lay-excel 还支持表格导出功能,可以将表格保存为多种格式的文件,如 CSV、Excel、HTML 等等。lay-excel 是一款开源的、基于 Google Sheets 的免费的在线数据表格库。总的来说,lay-excel 是一款非常优秀的在线数据表格库,它的简单易用、功能丰富、兼容性强等特点,使得它在国内市场中受到了广泛的欢迎和使用。原创 2023-05-16 14:55:01 · 1299 阅读 · 1 评论 -
DataGridXL中快速搜索单元格和底部全屏模式区域隐藏
DataGridXL表格是在2020年发布,DataGridXL在设计时就考虑到了性能。提供最快、最简单、最可靠的数据网格。DataGridXL支持所有常绿浏览器,为 Web 应用程序提供类似于 Microsoft Excel 的体验,它支持前端框架有Vue、React、Angular等。原创 2023-05-09 18:48:53 · 623 阅读 · 0 评论 -
Element-UI控件Tree实现数据树形结构
在前端开发中,有时会遇到所有菜单数据在同一级的情况,后端未对数据进行分级处理;但前端渲染需要是树状结构的数据,如何实现数据的树状化?将数组中通过父节点的ID与子节点的parentId关联,通过递归函数来实现。前端框架这里使用element-ui的tree控件来实现,对其不了解可以去官网查看文档。原创 2023-03-29 22:21:40 · 5589 阅读 · 0 评论 -
Element-UI实现复杂table表格结构
Element-UI组件el-table用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。这里将使用到以下两项,来完成今天demo演示:1. 多级表头:数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系。2. 合并行或列:多行或多列共用一个数据时,可以合并行或列。原创 2023-03-09 22:35:43 · 17407 阅读 · 19 评论 -
LAY-EXCEL导出excel并实现单元格合并
通过lay-excel插件实现Excel导出,并实现单元格合并,样式设置等功能。原创 2023-03-08 10:42:53 · 2440 阅读 · 6 评论 -
Vue实现考勤记录删除-自定义右击删除菜单
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。注意:所有浏览器都支持 oncontextmenu 事件, contextmenu 元素只有 Firefox 浏览器支持。通过DOM对象监听鼠标点击事件触发鼠标点击事件,获取鼠标当前浏览器位置根据当前位置重新调整自定义contextmenu的位置显示自定义contextmenu此时我们可以来实现自定义右击菜单原创 2023-01-31 19:56:08 · 1739 阅读 · 0 评论 -
Vue实现DOM元素拖放互换位置
HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个 元素为例展示了这些工作是如何完成的。一般来说,在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。原创 2023-01-18 16:21:52 · 5483 阅读 · 0 评论 -
Vue.js快速入门之八:实现登录功能
系统登录是指用户必须提供满足一定条件的信息后,才可以进入系统。最早系统一般是指用户名和密码,如今,登录方式已多元化,系统一般登录方式有:用户名+密码、二维码扫码登录、第三方授权登录、手机号+短信登录等等。移动端登录方式除以上几种外,还有手机号一键登录、人脸识别登录、指纹登录、语音登录等等。前面Vue讲解的这些篇幅了解后,可以实现一个简单的登录功能了,这里还是用传统的 用户名+密码 方式实现登录功能。......原创 2022-07-16 17:00:55 · 2751 阅读 · 0 评论 -
Vue.js快速入门之七:系统权限管理
每个系统项目中,都离不开权限的管理。有些小项目为了快速开发,可能会省略权限的处理;但中大型项目无法回避,中大型系统使用的人员比较繁杂,每个人身处不同职位或职权,所看到信息是不一样的。 权限管理,一般是先建“角色”,给角色添加某些栏目显示权限,或赋予增删改权限,再将“角色”指派给对应用户。一个用户可能只有一个角色,或多个角色,这样该用户则拥有了这些“角色”的权限集合。 下面我们通过代码,来处理栏目显示的权限,来了解前端是否何处理权限问题的。 前面几篇已介绍了如何使用m原创 2022-06-23 11:11:54 · 1329 阅读 · 0 评论 -
Vue.js快速入门之六:Set和Map的妙用
ES6的Set和Map区别是:Set是“集合”结构,而Map是“字典”结构;Set是以[value, value]的形式存储元素,而Map是以[key, value]的键值对形式存储元素;Map可以用get()键查找到特定值并返回,而Set不行。注意:注意:最近在研究Vue项目的本地模拟数据时,发现ES6的Set和Map可以很好实现本地数据的增删改查,也解决了Array会存储重复数据问题。对于某些项目特定需求,是有帮助的,这里通过几个案例,让大家了解如何使用它位。......原创 2022-06-07 06:36:39 · 5473 阅读 · 2 评论 -
Vue.js快速入门之四:axios安装和使用
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。如果对axios进行全局配置,后自定义实例进行默认配置,后者将优先于前者。 axios安装好可以直接使用了,为什么还要自定义一个新实例,再次封装呢。其实在实际的项目开发中,特别是中大型项目,一个系统所有请求的数据源不可能只有一个,会有很多数据源。每个数据源请求和响应也会存在差异,这时就存在特殊性了,需要根据实际情况来进行处理。............原创 2022-06-05 06:30:27 · 7186 阅读 · 0 评论 -
Vue.js快速入门之五:Mockjs的使用和语法详解
在前后端分离的开发中,需要前后台同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。所以开发初始前端会使用模拟数据,这里使用是mockjs。一、安装mockjs二、创建mock目录三、组件中模拟调用............原创 2022-06-06 06:29:44 · 1164 阅读 · 0 评论 -
Vue.js快速入门之三:Vue-Router路由
Vue Router是Vue.js的官方路由,与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.2 js通过this.$router实现跳转二、router基本改造通过vue-cli安装后,项目中会成一个router目录,所有路由通过index.js文件进行配置。但在一些中大型项目中,不仅会出现N位开发人员参与,还会出现N个项目组参与情况。这种情形下,如果大家在开发中,都集中在router的index.js配置,很容易出现代码冲突或覆盖现像。...原创 2022-06-04 00:01:10 · 432 阅读 · 0 评论 -
Vue.js快速入门之二:使用状态管理工具Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件状态,并在相应的规则保证状态以一种可预测的方式发生变化。什么情况下会使用到Vuex:比如登录的用户信息,接口的统一访问令牌等,会平凡使用和全站通用的数据,可以寄存在状态管理器中。一、store仓库创建首先在src目录中创建以上文件。1.1 state.js文件1.2 getters.js文件1.3 mutationsType.js文件1.4 mutations.js文件.1.5 actions.js原创 2022-06-03 11:37:46 · 655 阅读 · 0 评论 -
el-tree-transfer 树形穿梭框
el-tree-transfer是基于vue和element-ui的树形穿梭组件,使用前请确认是否引入element-ui。此组件类似element-ui的transfer组件,该组件分别是Checkbox多选框,Button按钮和Tree树形控件整合页成,在遇到需要树形穿梭功能时,推荐使用!...翻译 2021-12-23 23:08:37 · 3532 阅读 · 0 评论 -
Vue.js快速入门之一:安装和配置
目录一、vue安装二、sass安装三、vuex安装四、vue-devtolls安装五、vue-ls安装一、vue安装1.vue-cli全局安装npm install -g vue-cli2.初始化项目vue init webpack projectName3.运行项目注:npm中-g, -d, -s区别1.-g 全局安装,全称--global2.-s 安装到dependencies中,用于生产环境,即--save3.-d 安装到devD.原创 2021-04-17 17:02:42 · 1276 阅读 · 0 评论