vue
文章平均质量分 56
SwJieJie
这个作者很懒,什么都没留下…
展开
-
element-ui添加动态表格并合计行合并行操作
项目开发过程中,我们有时候会遇到表格里面数据进行动态添加修改删除的操作,表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用!原创 2023-02-21 16:04:24 · 2869 阅读 · 0 评论 -
vue中父子组件传值,怎么在子组件修改父组件的值呢
2.当你传入的prop为Object类型或者Array的时候,修改子组件内部的prop可以对应的改变父组件中的值(对象和数组是引用类型,指向同一个内存空间)答: 1.子组件想要修改时,须要经过**$emit派发一个自定义事件**,父组件收到后,由父组件进行修改。vue中父子组件传值,怎么在子组件修改父组件的值呢?1,使用$emit派发的事件。原创 2022-10-24 17:37:25 · 1590 阅读 · 0 评论 -
vue中常用修饰符
v-bind修饰符(实在不知道叫啥名字)v-model input最常用的双向绑定指令,实现了输入输出的实时绑定显示1、.lazy 光标离开更新输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据,相当于在onchange事件触发更新。2、.trim 过滤首尾的空格输入框过滤首尾的空格,中间的是不会过滤的3、.number如果你先输入数字,那它就会限制你输入的只能是数字。 如果你先输入字符串,那它就相当于没有加.number 而不是单一的限制输入数字或者输入的东西原创 2022-06-22 11:57:07 · 392 阅读 · 0 评论 -
element ui el-date-picker时间限制,结束日期时间不能小于等于开始日期时间和只能选当天和昨天
日期时间校验原创 2022-06-20 18:15:10 · 2204 阅读 · 0 评论 -
vue项目设置浏览器标题title
方法一,在vue.config.js文件添加如下代码:方法二,直接在public/index.html中修改title即可,如下:方法二、使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件第二步:在全局main.js引入、使用该插件第三步:在router中的index.js路由下设置mate属性第四步:我们在APP.vue使用vue-wechat-title插件VUE3网页图标默认使用的是VUE自带的一个ico的图标,也是VUE的logo。那么作为我们自己开发的项目原创 2022-06-17 17:22:33 · 4438 阅读 · 1 评论 -
vue element-ui tree树形控件中默认选中和回显问题
问题:我们使用树形控件在编辑时候有时候,会遇到回显数据是上一条回显给的数据。这个问题是由于我们的树形控件没有重新渲染导致的。比较笨的方法是每次编辑的时候重新加载一遍树形控件然后再进行回显选中的数据。不过这样会导致页面多次渲染影响加载速度和性能。解决办法:1,通过 this.$refs.tree组件上自定义ref名.setCheckedKeys(this.defaultList)<el-tree ref="tree" :data="dataList" show-checkbox原创 2022-04-18 16:03:10 · 8414 阅读 · 0 评论 -
vue axios 设置proxyTable跨域后访问接口404
描述我是用的是本地IP启动我的项目我想访问的接口是http://192.168.100.217:2000/api/OrganizationManager/Get_Load这是我proxy的配置代码proxyTable: { '/api': { target: 'http://192.168.100.217:2000', changeOrigin: true, pathRewrite: {原创 2022-03-15 16:45:49 · 3246 阅读 · 1 评论 -
Vue里面使用el-cascader 级联选择器 children为空 和获取value和label问题
问题描述1, 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据在后端处理完树形数据之后最后一个children数组为空数组,这样就会产生bug解决方法: (和后端处理数据一样就行递归判断数组是否为空) getClassificationTree() { getClassificationTree({ 'name': 'name' }).then(response => { this.options = this.getTreeD原创 2022-03-14 18:33:35 · 4185 阅读 · 0 评论 -
Vue获取两个时间点之间的所有间隔时间
这里我们使用的主要方法是new Date().setFullYear()设置当前的时间,如果传入的时间是new Date().setFullYear(2020,12,32),该方法会自动将时间转化为2021-1-1的时间戳 ,如果有一个参数超出了合理的范围,setFullYear 方法会更新其他参数值,日期对象的日期值也会被相应更新。 例如,为 monthValue指定 15, 则年份会加1,月份值会为3 ** MDN说明1,获取两个时间之间的 间隔时间代码如下:/** 获取两个时间之间的 间隔时间原创 2022-03-10 18:40:02 · 4175 阅读 · 0 评论 -
Vue 的父组件和子组件生命周期钩子函数执行顺序
可以归类为以下 4 部分:1,加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:mounted: functio原创 2022-03-02 14:24:55 · 447 阅读 · 0 评论 -
vue 使用keep-alive使用总结和进入缓存页需要再次更新数据
1,描述在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了。2,概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链原创 2022-03-02 11:55:51 · 6830 阅读 · 1 评论 -
Vue里面常用指令和用法
1,v-model【双向数据绑定】v-model是进行动态双向数据绑定的(只能用在input, textarea, select上),以input为例,进行绑定后,vue对象中data的相应值会与input的输入同步变动。// HTML<input type="text" v-model="message">new Vue({ data { message: ' ', //最开始message为空 } })如果我们在input的输入框输入“打游戏”,则在data中mes原创 2022-03-01 17:41:47 · 4484 阅读 · 0 评论 -
关于Vue中的v-if和v-for区别讲解
首先在官方文档中明确指出v-for和v-if不建议一起使用。一、v-if和v-for的作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名。在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化。两者在用法上区别原创 2022-02-28 14:10:26 · 3700 阅读 · 0 评论 -
Vue中watch和computed的区别
一、二者相同点和不同点相同:两者都可以观察页面数据的变化不同点computed(一个数据受多个数据影响)在computed中定义的每一个计算属性,都会被缓存起来,只有当计算属性里面依赖的一个或多个属性变化了,才会重新计算当前计算属性的值。1、支持数据的缓存。2、函数内部的数据改变也会触发。3、不支持异步,当computed内部有异步操作时computed无效4、如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般用computed5、computed 属性值会默认走缓存,计算原创 2022-02-28 11:24:39 · 2317 阅读 · 0 评论 -
Vue使用数组遍历生成dom结构,过滤掉不想要显示的记录---通过计算属性computed
前言在前端日常开发的过程中会遇到这样的一类需求,在使用数组遍历生成dom结构,需要隐藏掉一些不想要显示的记录。在本例中,需要展示List中 parseInt(item[‘totalIndicatorScore’]) >= parseInt(item[‘thresholdValue’]) 的数据一、问题描述在遇到上述的问题的第一想法是能否通过 v-if 来对遍历出来的item进行处理,按照这个思路便有了如下的代码:实现方式<div class="rb-row" v-for="(item,原创 2022-02-28 10:47:36 · 960 阅读 · 0 评论 -
vue里怎么实现右侧悬浮,并且能拖拽的功能?
实现效果案列一:小机器人可以上下左右进行拖拽,并且可以点击问题点:这里当点击拖拽机器人图标时候容易出现鼠标抬起后还可以继续拖拽(这里需要禁用img的拖拽属性加draggable="false"或者样式里面加 img { -webkit-user-drag: none})1, 使用自定义指令,创建拖拽代码 / directive / drag.jsimport Vue from 'vue';Vue.directive('drag', { bind: function (el) { co原创 2022-01-13 16:39:20 · 3447 阅读 · 1 评论 -
elementui 输入框里面禁止浏览器自动填充用户名密码
问题1浏览器这功能在登录的时候挺好用的,但是在注册和管理的时候就很难受了所以在普通的input上直接off就行了<input type="password" autoComplete="off"/>而在elementui上使用autoComplete="off"是没用的 得使用new-password<el-input v-model="form.password" show-password auto-complete="new-password"></el-原创 2022-01-13 12:04:29 · 4195 阅读 · 2 评论 -
vue里怎么实现文本溢出才显示悬浮窗title提示
先编写一个公共组件TextOverTooltip.vue,大致的实现思路:利鼠标移动到标签之上时,判断文字内容的宽度是否大于父级的宽度,来判断是否需要title提示<template> <div class="text-over-tooltip-components"> <el-tooltip :effect="effect" :disabled="isDisabledTooltip" :content="content" :placement="placeme原创 2022-01-13 11:52:11 · 2187 阅读 · 1 评论 -
element表格内容过多,鼠标悬浮显示全部内容(show-overflow-tooltip),内容过长显示悬浮抖动+内容非常长修改悬浮窗内容样式
element表格内容过多,鼠标悬浮显示全部内容(show-overflow-tooltip),内容过长显示悬浮抖动+内容非常长修改悬浮窗内容样式在表格要展示的列过多时,有些表格内容过多就会用到这个属性,表格的内容按表头宽度超过省略,鼠标悬浮显示全部内容,如果内容过多超屏幕会一直抖动用法很简单,加一行show-overflow-tooltip就可以了 <el-table-column show-overflow-tooltip prop="descripti原创 2022-01-13 11:26:28 · 5285 阅读 · 1 评论 -
Vue项目axios对请求数据以及接口api进行封装 + token
前言: 接口进行封装,方便后期维护方案一:接口封装通过直接封装axios,调用对应api方法进行接口直接的参数传递。1-先封装http( utils => http.js )import Vue from 'vue';import axios from 'axios';import qs from 'qs'// axios 配置var instance = axios.create({ headers: { 'Content-Type': 'application原创 2021-06-25 14:59:24 · 1332 阅读 · 0 评论 -
Vue打包后dist里面index.html和背景图片打不开问题
首先检查router.js路由里面是否是hash模式,浏览器请求地址带有#的,如果是history改掉,问题一:背景图片不显示在build这个文件夹下找到utils.js这个文件,找到以下代码,添加publicP在这里插入图片描述//添加这个代码就可以了publicPath:’…/…/’问题二:dist里面inde.html打开空白页面在config文件夹中的index.js文件,找到build,assetsPublicPath /前加一个 . 点//添加这个代码就可以了assetsP原创 2021-04-16 16:16:58 · 573 阅读 · 0 评论 -
this.$nextTick()的原理和使用场景
1,官方文档说明:用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。原理异步说明Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。在 Vue 的文档中,说明 Vue 是异步执行 DOM 更新的.具体来说,异步执行的运行机制如下。(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。(2)主线程之外,还存在一个"任务队列"(task queu原创 2020-08-12 10:54:30 · 7506 阅读 · 0 评论 -
elementui table fixed错位
最常见扯淡的就是给column设置:key=“Math.random()” 一点效果都没有,还在每次渲染的时候做一次js计算。目前在官方没有解决这个bug前如果有人碰到类似问题。建议大家监听table数据,每次数据得到或改变的时候去重新渲染一下element-ui目前已经修复该bug.如下:解决办法重新计算table布局 /* 监听table数据对象 */watch: { tableData(val) { this.doLayout(); } } /* 重新.原创 2020-08-12 10:18:20 · 5341 阅读 · 4 评论 -
vue父子组件之间的传值方法
组件的封装涉及到了组件之间的相互通信,这里面包含了更多的知识点,而这篇所总结的只是针对父子组件的通信,不涉及非父子组件之间的通信。父子组件通信:!三要素 *propsslot$emit父传子父组件对子组件传递参数,子组件需要用到props来接收参数。一般使用:以字符串的形式列出prop,或者指定prop类型props: ['title', 'likes', 'isPublished', 'commentIds', 'author']// ORprops: { title: Stri原创 2020-06-28 13:24:08 · 1898 阅读 · 1 评论 -
vue 报错信息整理
一、vue渲染列表时报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.报错信息如下图:报错这个信息是因为,v-for循环里,key值重复导致。检查代码发现的确如此解决办法是:1.把key值改成index即可,因为key值必须是唯一的二、Do not use built-in or reserved HTML elements as component id: aside原创 2020-05-22 11:03:04 · 700 阅读 · 0 评论 -
vue 打包中的背景图片不显示问题
vue 打包中的背景图片不显示问题在进行 npm run build 打包的时候, 项目中的所有背景图不显示的问题。解决方法是: 在build / utils.js 中 添加一句 publicPath: ‘…/…/’原创 2020-05-22 10:53:16 · 449 阅读 · 0 评论 -
vue渲染列表时报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
报错信息如下:报错这个信息是因为,v-for循环里,key值重复导致。检查代码发现的确如此解决办法是:把key值改成index即可,因为key值必须是唯一的如果对你有帮助,公众号搜索:前端早知道笔记 或扫描公众号二维码:...原创 2020-05-11 10:13:30 · 921 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id: aside/xx 报错信息问题
在使用vue开发项目的过程中,项目报错Do not use built-in or reserved HTML elements as component id: aside/XX 等等问题。报错截图如下:原因是因为本地使用script文件中,属性name出现了错误的命名方式,才导致报错解决办法是:1.把name名称命名正确即可2. 把name名称删除或注释掉即可如果对你有帮助,公众号搜索:前端早知道笔记 或扫描公众号二维码:...原创 2020-05-11 10:03:28 · 1671 阅读 · 0 评论 -
vue elementUI 使用slot-scope报错(版本升级)
vue里面使用element-ui表格组件时候报错 slot-scope未定义。尝试好多办法没有找到解决方案,后来发现,因为element-ui是版本的问题导致的。目前地址最低版本1.4.13版本已经不维护了。必须安装高于2.5版本以上才可以的。安装element-ui命令首先删除:1,node_modules文件夹下面的element-ui文件。2,卸载element-ui : n...原创 2020-04-28 12:25:05 · 7086 阅读 · 3 评论 -
element-UI中监听el-select下拉框可搜索时候,filter-method自定义搜索方法
el-select中加入filterable属性,就开启了搜索功能,然后我们用:filter-method="dataFilter"可以自定义一个搜索筛选条件,在这里来写我们自己的逻辑代码。监听输入框里面输入文字后,自动调用后台接口获取下拉框的数据<template> <section class="p-10"> <el-select clearable v-model="value" placeholder="请选择" filterable :filter-m原创 2020-05-09 14:19:00 · 9451 阅读 · 9 评论 -
vue项目升级element-ui
由于之前项目使用的element-ui 1.X版本,目前1.X的版本已停止维护,所以项目升级到最新2.X版本。以下是对vue项目,element-ui 1.X版本升级到2.X版本的记录。① 卸载老版本npm uninstall element-ui② 安装最新版本npm install element-ui -S③ 修改项目中main.js中theme-default修改为them...原创 2020-05-07 11:15:25 · 671 阅读 · 0 评论 -
vue里面使用echarts实现根据浏览器屏幕大小自适应
1- 安装 echarts 依赖npm install echarts -S2- 创建图表全局引入在main.js 中写import echarts from 'echarts'Vue.prototype.$echarts = echarts3- 在对应的页面里面写echarts图表示例1,新建echarts_demo.vue<template> <d...原创 2020-05-06 14:42:46 · 3587 阅读 · 2 评论 -
vue里面关于文件上传提交+form表单参数
1,使用element-ui里面的el-upload组件进行文件上传,设置auto-upload为false不自动上传。后面我们通过设置请求头部通过表单的形式进行传参。let config = { headers: { "Content-Type": "multipart/form-data" } };2,防止跨域我们这里需要设置 const instance ...原创 2020-05-06 14:07:17 · 4371 阅读 · 5 评论