Vue+Elementui工作随笔
之前上班一直都是用的django,所以vue的一些知识没有得到充分的应用,现在上班重新把vue捡起来了,慢慢学习。慢慢记录,慢慢应用。在这里记录遇到的有关vue的所有知识点与应用技巧
邵邵邵
我爱敲代码!!
展开
-
el-table-column中使用width在windows上展示正常,在mac上超出部分不隐藏
el-table-column中使用width在windows上展示正常,在mac上超出部分不隐藏原创 2022-11-07 14:38:48 · 404 阅读 · 0 评论 -
父组件中强制刷新子组件
在父组件中强制刷新子组件原创 2022-09-01 15:28:16 · 740 阅读 · 2 评论 -
创建项目时:spawn yarn ENOENT 解决方案
报错:原因:默认的包管理器是yarn,这里需要把yarn改成npm解决:C:\Users\User路径下的.vuerc配置文件,把packageManager配置项的值改成npm原创 2022-02-28 15:42:28 · 1393 阅读 · 0 评论 -
vue中watch的详细讲解(包括深度监听等属性)
一、什么是watch?什么时候使用watchwatch是vue实例的一个属性,主要用来监听数据的变化,并做出一些操作二、watch的使用2.1简单数据类型的使用info:{ handler(newValue,oldValue){ console.log('旧值:',oldValue)//改变之前的值 console.log('新值:',newValue)//改变之后的值 },以上写法针对于简单的数据类型,例如字符串、数字、布尔原创 2022-02-21 17:33:21 · 6581 阅读 · 0 评论 -
理解vue-element-admin 的登录流程
1.首先,点击登录按钮,触发handleLogin方法,通过 this.$store.dispatch(“user/login”, this.loginForm)调用vuex中login方法,此处user/login表示的是调用user文件下的login方法 handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { this.loading = true;原创 2022-02-17 11:40:54 · 4984 阅读 · 1 评论 -
快试试在el-table无数据的时候来自定义提示信息吧
一、效果图二、实现代码这里只需要一个插槽就可以解决了<template slot="empty"> 选择乙方,查看对应的标的清单</template>ok了!原创 2022-01-20 10:46:47 · 901 阅读 · 0 评论 -
详细总结this.$router.push与this.$router.replace
一、this.$router.push1.1 使用方法1.声明式< router-link :to="…">:当使用router-link进行路由跳转时,实际上是调用了router.push()进行路由跳转2.编程式 :this.$router.push(’路径‘)1.2 使用语句1.字符串this.$router.push(‘index’)2.对象this.$router.push({path:‘index’})3.携带参数3.1 path 跳转方式,只可以用que原创 2022-01-12 16:40:31 · 9887 阅读 · 0 评论 -
运行项目时:Cannot find module ‘bug-versions/package.json‘ 解决方案
一、问题Cannot find module 'bug-versions/package.json二、解决方案使用npm install --save-dev 自动配置package.json,然后会自动安装所需的依赖原创 2022-01-10 15:45:26 · 6981 阅读 · 1 评论 -
npm install报错Maximum call stack size exceeded解决办法
一、场景重现今天想拉一下别人代码看看,然后npm install的时候竟然报这个错:“Maximum call stack size exceeded”,以前也没见过这个错,后面终于找到了解决方案。二、解决方案1.升级npm,npm install -g npm2.重新执行,npm/cnpm install3.如果还不行,可以试着清一下npm缓存,npm cache clean --force4.重新执行,npm/cnpm install...原创 2021-12-16 15:39:05 · 4533 阅读 · 0 评论 -
[Vue warn]: Error in callback for immediate watcher “formInline.projectSups“
继上次监听了formInline里面的projectSup字段后,发现出了一个bug,Error in callback for immediate watcher “formInline.projectSups”: “TypeError: Cannot read property ‘filter’ of undefined”大概可以知道是在watcher监听的时候报的错,但其实不影响使用,但这个飘红看着真的很难受。正当我百思不得其解的时候,发现了这个所以刚开始进页面的时候会先执行watch,此原创 2021-12-04 14:45:38 · 5891 阅读 · 5 评论 -
elementui || 如何更改el-table某一个表头的背景颜色和字体颜色
我们在使用elementui官方提供e-table的案例时,会发现表格的表头没有任何样式,这样的话首先是没有什么辨识性,其次是也不美观,降低了用户的使用体验。如下:那我们可以做的是给表头一个背景颜色,这样表头的位置看起来就很明显。按照官网提示呢,可以使用header-cell-style属性<el-table class="Firsttable" :data="formInline.approvals" border style="width: 100%" :header-cell-style=原创 2021-11-26 11:37:40 · 11577 阅读 · 3 评论 -
element-ui手机号校验
data() { var validatorPhone = function (rule, value, callback) { if (value === '') { callback(new Error('手机号不能为空')) } else if (!/^1\d{10}$/.test(value)) { callback(new Error('手机号格式错误')) } else { callback()原创 2021-11-02 10:00:26 · 1819 阅读 · 0 评论 -
element-ui时间组件的表单验证,不能为空,结束时间必须大于开始时间
一、template里的代码<el-form-item label="会议开始时间" prop="startTime"> <el-date-picker :disabled="isEdit" v-model.trim="formInline.startTime" type="datetime" placeholder="选择开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:s原创 2021-11-01 15:28:36 · 3392 阅读 · 0 评论 -
解决this.$router.push()带参数跳转时,页面地址改变,数据却没有刷新的问题。
一、问题今天遇到一个问题,我用this.$router.push()带参数跳转时,页面的url地址发生了改变,但页面却没有刷新,需要刷新一下才能重新获取数据,查看资料找到了解决方案。二、原因created并不是每次进入页面都会执行,因为vue会使用页面的相同组件,所以这里才不会进行数据刷新。三、解决方法当路由发生跳转时,需要在watch里监听路由的变化...原创 2021-10-14 15:05:08 · 3705 阅读 · 0 评论 -
在vue中定义的空对象,打印出来却是{__ob__: Observer}
一、问题:今天在vue的data中定义了一个json对象,明明是个空对象,可是打印的时候却是下面这样的。定义:data(){ return{ currentmeetingProjects: {},//当前选择的待审议项目}}打印:二、理解之所以在data中定义的数据可以实现双向绑定,是因为当在data中绑定一个对象的时候,vue会添加一个ob__:Observer_监听器对数据进行监听,这些内部属性虽然不可枚举(即不可以通过for…in循环进行遍历),但是console.l原创 2021-09-27 11:06:40 · 4833 阅读 · 0 评论 -
el-tree用id绑定node-key,一棵树下又有相同的id,怎么办?
今天该下班的时候出现一个bug,按照官方给出的api,this.$refs.tree2.setCheckedKeys([])并没有完全修改左侧的修改状态,下面先展示一下正确的情况和出现bug的情况一.页面展示1.页面逻辑2.正确情况3.错误情况二、问题分析分析出现错误的情况,只有【测试1】这个用户的选中状态未被修改,而【测试1】这个用户同时也在下面【分组二】这个分组中,怀疑是不是因为又在别的分组存在,选中状态才不会被修改的,于是又在【分组一】分组中添加了几个【分组二】中存在的用户,相同的操原创 2021-09-13 11:08:01 · 10704 阅读 · 11 评论 -
ElementUI时间选择器,传入时间之后无法改变
需求:计划年度(plan字段):当前年份统计区间(始)(statisticsStart字段):监听计划年度,为计划年度的1月1日统计区间(末)(statisticsEnd字段):监听计划年度,为计划年度的12月31日如下图所示:1.初始化计划年度的值注:这里date+‘ ’,是因为elementui的日期选择器接收的是字符串,而new Date().getFullYear()是Date数据类型,如果不转换成字符串,会报如下错:mounted() { if (this.id == "原创 2021-09-10 11:34:21 · 1030 阅读 · 0 评论 -
vue+elementui:前端文件上传与后端文件上传(傻瓜式教学)
qqq原创 2021-09-06 18:22:24 · 10463 阅读 · 0 评论 -
在富文本编辑器编辑的内容调用后端的接口保存再返回的数据带标签
场景:在前端的富文本编辑器编辑内容后,调用保存接口,保存成功后返回给前端的是带标签的文本处理前:处理后:如何处理:这里的处理用到了正则ToText(htmls) {//我这边是用到的elementui的table表格,对数组的content(保存的富文本编辑器的编辑内容)字段进行处理,所以把这个数组作为参数 for (var i = 0; i < htmls.length; i++) { console.log(htmls[i].content, 'befo原创 2021-09-03 17:35:43 · 1366 阅读 · 1 评论 -
ElementUI的表格怎么删除全选框
今天刚接收了需求老师的新的界面图,发现有的表格取消了全选的功能。一、实现效果二、实现方法1.在<el-table>里添加<el-table-column type="selection" width="55">2.此时表格里有单选框和多选框,在el-table里面添加cell-class-name属性<el-table :data="tabData" border :header-cell-style="{ background: '#fafafa' }" :原创 2021-08-12 11:22:15 · 1050 阅读 · 0 评论 -
vue报错:Uncaught (in promise) TypeError: Cannot read property ‘$message‘ of undefined
今天项目搭建的时候遇到一个问题:Uncaught (in promise) TypeError: Cannot read property '$message' of undefined看到这里我知道肯定是elementui的messagebox组件出现了问题,查看elementui的官方文档,全局方法如果你完整引入了 Element,它会为 Vue.prototype 添加如下全局方法:$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中原创 2021-07-30 18:43:12 · 6487 阅读 · 3 评论