
Vue
文章平均质量分 59
小刘爱搬砖
学习过程中遇到的一些问题与笔记,谨此记录,学艺不精,欢迎指点。
仅供学习使用,转载文章如有侵权,请联系删除。
展开
-
SpringBoot和Vue接口调用传参方式
一些前后端分离项目接口调试时经常出现传参格式错误问题。前后端进行交互时方法一般就分为get和post,至于后面的delete和put都是基于post进行封装而出的。;原创 2024-01-25 09:52:20 · 1741 阅读 · 0 评论 -
Vue项目 封装Element-ui中的el-pagination作为公用分页组件
原文链接:原因:分页在项目当中使用非常频繁,因此就将el-pagination封装为了一个全局组件1.首先在components下面新建一个pagination.vue文件<template> <div :class="{ hidden: hidden }" class="pagination-container"> <el-pagination :background="background" :current-page.sync转载 2022-05-10 11:17:31 · 1241 阅读 · 0 评论 -
前端踩坑小结:当element-ui的el-dialog组件中包含子组件时,用refs调用子组件时的undefined问题【转载】
最近在用dialog调用子组件时发现打印为undefined,加载顺序的问题分享一个找到的实测可行的解决办法原文今天写VUE时我在element-ui的el-dialog组件中包含了一个子组件。然后我通过$refs调用该子组件里面的方法,在控制台上却显示undefined。因为自己之前用过refs来调用子组件方法,但是没有遇到过这种问题,很是无奈加之彷徨。后来在度娘怀里遨游一番,发现和element-ui框架有关系,总之什么关系呢,我也说不清啦。直接看解决方法吧。首先,你要确保你的e-dial转载 2022-02-11 16:47:46 · 1102 阅读 · 0 评论 -
Vue使用watch监听一个对象中的属性的实现方法
这篇文章主要介绍了Vue使用watch监听一个对象中的属性的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如`在这里插入 queryData: { name: '', creator: '', selectedStatus: '', time: [], },第一种解决方案:直接对象现在我需要监听这个queryData,我可以这样.转载 2021-12-02 09:38:28 · 1394 阅读 · 0 评论 -
vue-treeselect组件修改css样式不生效【已解决】
原文链接:https://www.cnblogs.com/procedureMonkey/p/13600422.htmlvue有很多插件,但是插件的样式都是固定的,有些时候你能找到页面上的class属性去设值样式,但是效果老是不生效;很多入门vue的后端开发人员 可能不太了解这方便,这里给大家一个例子,仅供参考这里推荐使用深度样式选择例1:你要修改input的高度<treeselect v-model="areaSelectParam.areaId"转载 2021-11-09 14:27:54 · 4697 阅读 · 1 评论 -
Vue的防抖和节流(接口频繁调用如何处理)
首先描述一下我所使用的业务场景:系统有一个批量审批的功能,每个审批的流程需要根据提交的用户实时的反馈回去进去用户页面的刷新,如果一个用户同时有多个流程被审批通过,前端会向服务端频繁的多次调用同一个接口,造成服务器压力过大和页面卡顿,非常影响用户体验。目标:需要短时间内向服务端频繁调用接口时只去调用最后一次的接口。(防抖)防抖和节流的区别:主要体现在执行次数上的区别,比如我们写一个200ms的延迟时间,节流就是每200ms执行一次,而抖动是只有在最后一次事件的200ms内调用一次回调函数。防抖和节流都可以原创 2021-09-27 14:15:40 · 6194 阅读 · 0 评论 -
Element-UI el-select 默认值问题,根据另一个select选项的变化修改【已解决】
这里我就不展示完整的代码了,仅展示所用到的代码附上官方文档的地址:https://element.eleme.cn/#/zh-CN/component/select首先看一下我们需要进行修改的两个select<el-col :xs="33" :sm="33" :lg="12" > <el-form-item label="加油卡号" prop="fuelCardId"> <el-select v-model="fuelCardId" filterable c原创 2021-08-13 10:05:59 · 2284 阅读 · 0 评论 -
ElementUI Tree懒加载的搜索功能, 主要看思路吧 【已解决】
我这里的解决办法需要额外的后端接口,目前我总共额外需要了两个。我这里就以组织人员管理为例进行列举,现在A组织下存在组织B和C,然后再B和C组织下存在若干的人员信息,每一层级之间通过懒加载进行渲染,可以通过搜索功能根据人员姓名进行搜索。思路: 首先需要根据人的名称在后端查出人员的信息(最重要的是组织id)可以根据组织id去查找人员所在的组织node,然后判断当前展开的tree中是否存在这个结点 this.refs.tree.getNode(orgId),若存在直接this.refs.tree.getN原创 2021-07-09 15:28:40 · 4943 阅读 · 4 评论 -
Vue报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access controlcheck
全部的报错信息:Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://localhost:8086' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Contro原创 2021-05-15 17:07:13 · 199129 阅读 · 14 评论 -
Vue axios 拦截器实现用户长时间不操作后跳转至登录页
最近项目要求用户15分钟内不对页面进行操作(不向服务端发送请求)就提示用户登录失效,需要重新登录,并跳转至登录页。我这里只写了前端代码,因为这一块的服务端是我的同事来做。后期如果有机会我会将这一块进行补充。说明: 这里是用的我的项目代码,部分引用是多余的我会进行说明qs : get/delete请求传递数组数据时,对数组进行序列化时使用,解决在url中传递数组问题,可以参考我转载的上一篇文章 ,地址放在下面axios 传递数组爬坑总结项目代码import axios from 'axios'原创 2021-04-29 16:55:42 · 1099 阅读 · 2 评论 -
axios传递数组参数爬坑总结
总结一下正确的传数组参数应该如下,瞅代码:引用import axios from 'axios'import qs from 'qs'get / delete请求方式解决方式如下axios.get(url, { params: { ids: [1,2,3], type: 1 }, paramsSerializer: params => { return qs.stringify(params, { indices: false })转载 2021-04-27 16:57:09 · 834 阅读 · 0 评论 -
Element UI Tree 实现父节点内节点拖拽
由于代码量过大,我这里进行部分代码粘贴 可以好好研究官方文档的api,很有价值官方api <el-tree :data="treeData" ref="tree" :key="tree_key" node-key="id" class="margin-top10" @node-click="nodeClick" :filter-node-method="filterNode" :default-exp原创 2021-04-21 15:40:52 · 1920 阅读 · 0 评论 -
Vue ElementUI Tree结构 实现懒加载案例
官方文档比较全面,这里我就自己的实际开发提供一个案例,刚刚接触前端,不足之处,感谢指正官方文档<el-tree :props="props" //展示你的数据信息 :load="loadNode" //与lazy配合使用 lazy //开启懒加载 show-checkbox //是否开启复选框 ></el-tree><script> export default { data() { return {原创 2021-04-15 14:46:17 · 1158 阅读 · 0 评论 -
Element-UI 树形控件,报错Syntax Error: Unexpected token (108:10)<span>标签报错(已解决)
官方文档地址这里给出具体的报错截图问题解决:这是因为树形控件需要jsx语法支持,需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法安装相关依赖到生产环境中(-S / --save 将依赖添加到生产环境中)npm install babel-plugin-transform-vue-jsx -Snpm install babel-helper-vue-jsx-merge-props -Snpm install babel-plugin-syntax-jsx -原创 2021-04-09 12:09:33 · 766 阅读 · 0 评论