![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue项目中遇到的困难
芝士焗红薯
不干活就没饭吃
展开
-
关于ant design vue中设置table组件每页显示的条目数量
最近项目中使用到antv,用到table组件,默认是每页10条,根据需求需要显示每页6条,只需要加入:pagination="{ pageSize: 6 }"就可以了。原创 2022-11-08 14:56:32 · 3834 阅读 · 0 评论 -
关于将ant design vue中树选择的条件查询改为多选的问题
关于将ant design vue中树选择的条件查询改为多选的问题原创 2022-09-21 16:02:24 · 869 阅读 · 0 评论 -
解决ant design vue使用tree select树选择器时父节点需要不可选中的问题
在使用antv的tree select树选择器时,发现默认它的父节点是可以选中的。在用户使用的时候,很多时候是不需要选中的。所以我们只需要在给这个tree数组赋值的时候,给父节点赋selectable为false就可以了。查看了他的api发现一个属性selectable,默认为true。同理,如果需要禁用的话,直接disabled为true就可以。原创 2022-09-14 15:01:09 · 4830 阅读 · 0 评论 -
vue父子组件传值:父传子、子传父
1.父组件引入子组件2.父组件给子组件传值3.子组件接收父组件传来的值4.子组件将值传给父组件6.父组件直接调用子组件的方法5.父组件接收子组件传来的值原创 2022-08-30 20:02:37 · 6267 阅读 · 4 评论 -
关于vue3项目中代码出现红色波浪线的问题
因为是导入的jeecg项目,打开了eslint,所以有很多地方代码的写法不一样,之前是在vue.config.js文件中,加上lintOnSave: false就可以避免报错。现在设置了false,代码不规范的地方还是会有红色波浪线。最近换电脑改成了vue3,导致代码规则有些地方和之前不一样。可以打开文件-首选项-设置,搜索eslint。然后把两个打勾的地方取消就可以了。...原创 2022-08-17 16:47:29 · 1691 阅读 · 0 评论 -
vue中用js实现循环可编辑表格
1.表格需要动态,根据输入的数字显示列数2.表格可编辑、可禁用、可计算原创 2022-08-12 16:14:49 · 1259 阅读 · 0 评论 -
vue项目中如何关闭eslint
eslint是用来进行语法规范,前几天在用jeecg项目的时候,用了jeecg生成的代码。jeecg生成的代码和eslint的规范不一样,所以需要关闭eslint。在vue.config.js文件中,加上lintOnSave: false。原创 2022-08-10 15:59:10 · 593 阅读 · 0 评论 -
解决vue项目运行后出现Cannot read property ‘range‘ of null的问题
解决vue项目运行后出现Cannot read property 'range' of null的问题原创 2022-08-02 11:06:57 · 2075 阅读 · 2 评论 -
解决vue项目中前后端交互的跨域问题、nginx代理配置
解决vue项目中前后端交互的跨域问题、nginx代理配置原创 2022-07-28 15:54:50 · 4355 阅读 · 0 评论 -
在vue项目中使用axios发送post请求出现400错误
在vue项目中使用axios发送post请求出现400错误的解决原创 2022-07-28 15:34:10 · 11289 阅读 · 0 评论 -
关于可以通过本地访问前端vue项目,不能通过ip访问的问题
和后端联调,后端要看我的前端页面,输入我的ip和端口,发现访问不了。搜了一下问题,是需要打开项目中config目录中index.js,将dev中的host由localhost修改为0.0.0.0。原创 2022-07-26 16:47:19 · 4071 阅读 · 1 评论 -
vue中使用iview的modal弹窗嵌套modal出现格式错误的问题
问题:一个全屏modal,点击按钮,再弹出一个modal,就会出现这种格式问题。 解决:搜了一下,说是因为modal的使用是平级的,z-index都是1000,所以后面的会覆盖前面的。不知道是不是因为这个,因为我把嵌套的这个modal改成全屏的,就没有问题了。解决办法是说给modal加一个类名, z-index改一下就行了,除了要改嵌套modal(以下简称modal2)的z-index,modal2的mask(阴影)也需要改。......原创 2022-07-04 16:47:39 · 1460 阅读 · 1 评论 -
vue在子组件中调用接口、点击按钮弹出窗口显示内容
1.从子组件获取接口2.点击子组件内的按钮显示内容原创 2022-07-04 16:35:12 · 3623 阅读 · 1 评论 -
vue中关于重置表单数据出现undefined的问题
解决vue中,给表单数据重新赋值空字符串,却把数据变成undefined的问题。是由于v-model的双向绑定,空字符串没有对应的数据,导致变成了undefined。所以需要给空字符串绑定数据,或者在它为undefined的时候赋值空字符串。...原创 2022-07-01 15:51:30 · 2853 阅读 · 0 评论 -
关于jeecg前端项目使用yarn build打包找不到dist包的问题
今天第一次打包,打包完找了半天没看到dist包。搜了半天也没找到。最后发现,jeecg的项目主要还是要看vue.config.js文件,里面写了outputDir(输出文件目录)是html,所以只要把html这个文件夹发给后端就行。 ......原创 2022-07-01 15:07:26 · 1315 阅读 · 0 评论 -
vue中使用jeecg进行前后端联调
最近项目中总是用jeecg来进行系统管理端的操作,因为jeecg可以根据账号直接分配权限。但是使用jeecg需要前后端服务同时起,不然登录不进去,在自己电脑上同时起前后端没问题,但是和后端联调的时候,总是连不上,后来发现是有两个地方需要改地址。...原创 2022-06-20 14:35:46 · 632 阅读 · 0 评论 -
vue中使用window.open打开页面并拼接参数
window.open常用来在项目中链接外部网站,接收三个参数1.strUrl,要打开的页面或资源的url地址2.strWindowName,窗口的名字,用于后续对该窗口的引用,不是窗口的标题。该参数除了支持普通的名字外,还支持和a标签一样的特殊关键字:_self(当前窗口)、_blank(空白窗口)、_parent(父窗口)、_top(顶级窗口)3.strWindowFeatures,窗口的描述参数,如尺寸、位置、是否启用工具栏等。各个参数由逗号隔开,参数之间以等号连接。可以指定窗口的大小和位原创 2022-05-23 16:29:29 · 3023 阅读 · 0 评论 -
vue项目中涉及到的iview组件
1.input输入框<Col :span="6"> <FormItem label="姓名"> <Input v-model="form.name" placeholder="请输入"></Input> </FormItem></Col>2.select选择框<Col :span="6"> <FormItem label="性别"> <Select v-mod原创 2022-05-19 16:19:32 · 699 阅读 · 0 评论 -
解决vue项目中缩进不一致的问题
在vue项目中,有时候会碰到这个文件的缩进是两格,另一个文件的缩进是四格。但是vue的eslint格式是默认两格,所以调整缩进四格的文件就很不方便。碰到这种情况是因为vue文件默认缩进四格。所以我们更改一下vue设置。打开vscode,打开文件,选择首选项,点开设置,把缩进改为2修改默认缩进(默认为4)...原创 2022-05-12 11:18:47 · 3898 阅读 · 0 评论 -
解决在vue项目中使用ivew组件eslint报错的问题
最近没事新建了一个vue项目,在使用ivew的栅格布局组件的时候总是报错vue Parsing error: x-invalid-end-tag去查了一下发现是vue将标签渲染为原生html标签时,由于这些标签是自闭合的,所以有end标签会报错。所以需要修改eslint文件。全局搜一下eslint,就能搜索到eslintrc.js文件。在rules里面加一行代码"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] 就可以了原创 2022-05-11 14:47:09 · 2062 阅读 · 0 评论 -
vue项目引入element ui、iview和echarts
脑子不好,每次引入都要重新搜一遍,今天把几个自己整理一下。全部引入,没搞按需引入。1.vue项目引入elementui控制台输入npm install element-ui -smain.js文件中输入import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)2.vue项目中引入iview控制台输入npm install iview -s原创 2022-05-09 18:04:39 · 623 阅读 · 0 评论 -
创建一个vue项目
学vue这么长时间,除了老师最开始带我建了一个项目,后来的项目都是直接用的公司的再也没建过,今天才发现自己不会建项目。搭建环境就不赘述了。1.先cmd,进入项目的目录2.新建项目 vue create + 项目名称比如我这边是 vue create mydemo ,当然因为我不是vuecli3所以这个命令没用。用之前的新建命令就可以 vue init webpack + 项目名称3.这里就建好了4.cd mydemo会进入项目npm run dev启...原创 2022-05-09 17:33:38 · 254 阅读 · 0 评论 -
vue实现垂直居中
有些时候没有使用form表单,文字和输入框/按钮会出现不对齐的情况,此时需要将文字垂直居中。情况如下:很明显是高了一点的对文字进行垂直居中vertical-align:middle<span style="margin-left: 10px;vertical-align:middle">年度:</span>加了之后的效果如下:该属性的作用是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。绕来绕去的我也看.原创 2022-04-21 15:34:10 · 6760 阅读 · 3 评论 -
vue获取当前日期
写页面的时候经常要获取到当前的日期获取当前时间的方法:let date= new Date()在控制台打印出来的结果:Thu Apr 21 2022 15:13:05 GMT+0800 (中国标准时间)我们通常获取当前年度、月份或日期//年let year = new Date().getFullYear();//月份是从0月开始获取的,所以要+1;let month = new Date().getMonth() +1;//日let day = new Date().原创 2022-04-21 15:23:56 · 24375 阅读 · 1 评论 -
jeecg修改前端页面默认主题色
最近在使用jeecg,他自己的前端文件太多了经常找不到位置。修改前端页面默认主题色。先找到vue.config.js修改这里之后重启项目就可以了但是看到一个文章里说还要修改defaultSettings.js文件位置在src下面打开可以看到,修改一下试了一下,只改vue.config.js好像没用,两个一起改了好像就行了,懒得再测了一起改了吧。...原创 2022-04-21 14:44:13 · 2184 阅读 · 0 评论 -
解决进行路由跳转modal会出现的样式问题
真的很无语,搞了两天结果发现其实很简单。之前项目需要点击按钮,进行路由跳转到对应的页面。现在需要把几个按钮合并,放进一个modal里。所以我进行了modal的嵌套,但是嵌套之后页面样式出现了问题。ivu-modal-content样式丢失。bug如下:发现问题之后我首先对样式进行了调整,很显然是没用的。后来发现modal是不需要嵌套的,可以直接写在外面调用。一开始是进行了嵌套后来发现直接写在外面就好了具体原因未知,总之很无语。关于路由跳转的问题可以看.原创 2022-04-15 16:31:03 · 858 阅读 · 0 评论 -
解决iframe使用postMessage传值addEventListener未接收到却收到webpackwarning的问题
项目中使用到iframe,iframe跨域通信需要使用postMessage发送消息,addEventListener接收消息。原先是获取当前窗口的数据发送过去。const _iframe = document.getElementById('iframeViewer').contentWindow let _obj = res.data.data _obj.type = 'view' _obj.currentProcessInstanc原创 2022-04-15 16:14:21 · 7951 阅读 · 0 评论 -
css实现元素水平居中
记录一个通过位置实现元素居中的方法。先让div左边50%,因为是根据div左边界实现的,所以需要让div往左回半个容器的宽度实现元素居中。绝对定位实现元素水平居中.div { position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2);}举例:.div { position: relative; left: 50%; width: 700px; margin-left: -350px原创 2022-04-12 15:04:32 · 455 阅读 · 0 评论 -
vue中的菜单切换menu
项目需要点击按钮进入一个可以进行菜单切换的页面。效果如图:1.写左边的菜单栏<Col :span="2"> <Menu active-name="rwcl" style="width:auto;" @on-select="changeMenu"> <MenuItem name="rwcl"> 任务处理 </MenuItem> <MenuItem name="lct"> 流程图原创 2022-04-08 16:43:32 · 2960 阅读 · 0 评论 -
vue中根据后端接口数据控制按钮的显示与隐藏(手动添加响应式this.$set())
项目涉及到的问题,按钮需要根据后端返回的参数情况,实现按钮的显示与隐藏。效果如图:1.查看后端接口get请求,需要传businessId和compoCode两个参数,返回的data有数据就显示按钮,没数据就隐藏按钮。2.在config.js中配置isExistProcess: `/${version}/common/isExistProcess`,3.准备参数地址有了,compoCode是每个页面唯一的可直接获取,businessId是getTableData接口.原创 2022-04-08 16:22:26 · 6823 阅读 · 0 评论 -
vue在组件内实现对图标的显示与隐藏
在项目中需要在页面A调用页面B。页面B在页面A被调用时,肯定需要实现只读,禁用所有功能。因为页面B上的一个按钮是自己写的,没有disable功能,只能根据条件把他隐藏掉。在使用时发现语句有问题,在所有页面上,图标都被隐藏了// 错误代码:v-if="this.$route.path.indexOf('fjdj') == '-1'"后来才知道把在data中把this赋给一个值就可以了。因为插槽里的东西最终是插到组件里面的,到时候标签里的语句也是在组件里面执行,这个this就是组件了,所以要提前原创 2022-03-31 15:05:41 · 1873 阅读 · 0 评论 -
vue中iframe的使用
iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转。<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>获取iframe里面的内容iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取if原创 2022-03-31 14:52:16 · 31196 阅读 · 1 评论 -
vue中树状控件的使用方法
1.引用树状控件<FormItem label="业务部件名称:" prop="compoName"> <Input v-model="childForm.compoName" icon="ios-menu" readonly placeholder="请点击图标选择" @on-click="chooseCompoCode"/></FormItem>2.methods中写选择code的方法methods: { chooseCompoCod原创 2022-03-23 14:58:31 · 1529 阅读 · 1 评论 -
vue中数组indexOf和slice的使用方法
1.indexOfindexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。let _arr = []_arr.indexOf(searchvalue,fromindex)参数searchvalue必需,为需要检索的字符串值。fromindex是可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。该方法将从头到尾地检索字符串 stringObject,看它是否含原创 2022-03-23 14:46:03 · 6981 阅读 · 0 评论 -
vue使用router-view调用页面
在项目中,需要在其中一个页面,调用很多其他页面的表单,所以使用router来实现页面的调用。vue-router有传递参数的两种方式,get和post。1.get方式页面跳转this.$router.push({path:'/xxx',query:{id:1}});//类似get传参,通过URL传递参数新页面接收参数this.$route.query.id2.post方式页面跳转 //由于动态路由也是传递params的,所以在 this.$router.push()原创 2022-03-17 16:10:37 · 3151 阅读 · 0 评论 -
element的slot使用
原创 2022-03-11 11:24:50 · 1257 阅读 · 0 评论 -
vue代码运行
1.下载的代码可能没有modules包,文件解压打开之后需要先npm install2.打开代码的package.json文件,查看文件的debug部分。3.根据这个部分的命名,进行npm run dev/npm run demo/npm run serve4.代码运行完成5.代码需要打包的话,npm run build...原创 2022-03-11 11:19:28 · 2368 阅读 · 0 评论 -
在vue中使用vuex存储数据和提取数据(使用mapMutations和mapState)
项目中遇到的问题,因为流程整体名称和用户任务名称共用了name,所以如果保存的时候选中了用户任务名称,就会把流程整体名称误存成用户任务名称,因为代码逻辑太复杂了看不懂,所以准备采取一个简单粗暴的方法,就是把流程整体名称存进vuex,最后保存的时候把name保存成存进vuex的流程整体名称。1.在store的index.js文件中,新建一个变量processName用来存放流程整体名称。import Vue from "vue";import Vuex from "vuex";// 使用vuex原创 2022-03-09 16:30:30 · 6575 阅读 · 0 评论 -
axios的传参问题
今天在和后端联调的时候发现了一些问题,对于axios我一直是不太懂,今天问了朋友,通过了实践,稍微懂了一点点,在此做个记录。axios的传参方式分为get(查询数据)和post(添加数据)(put和delete这边暂时不写)1.get方式get方式使用url传参或者使用params选项传递参数。使用url传参,可以把数据拼接到url上const url = `${window.zvconfig.url.processDelete}?id=${row.id}` thi原创 2022-03-08 14:40:11 · 1114 阅读 · 0 评论 -
vue父子组件传值
记录一下项目中遇到的问题。因为一个流程对应一种单据,所以每次点击单据详情,应该出现相应的单据内容。在另一个页面,也需要调用这个单据内容。因为vue不能直接调用弹出框,所以老师把单据内容写成了组件,在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。(其实在本来显示单据内容的页面,只要根据后端传的内容判断显示哪个单据就可以,但是因为在另一个页面也需要调用单据内容,所以写成组件会更方便。由此,如果一个页面或者弹出框,在很多个页面需要用到,可以把这个地方的内容写成组件)......原创 2022-03-01 17:29:43 · 25279 阅读 · 5 评论