vue
伍什kay
猿,妙不可言
展开
-
Vue3 Antdv 表格分组合并指定列
数据中group值相同的视为一组,dataMerge方法为每一行添加merge属性,同组内首行的merge属性为这一组的长度,也就是要合并的行数,组内其他数据行内的merge属性都将值设置为0,至此才可以完成指定列的分组合并。项目特殊需求:依照数据中的分组标签以及指定的列进行数据分组合并。原创 2023-06-06 15:40:58 · 923 阅读 · 0 评论 -
Vue 实现虚拟列表
使用Vue实现虚拟列表无限滚动原创 2022-12-23 15:10:16 · 421 阅读 · 0 评论 -
Vue 实现全屏滚动效果
Vue 实现全屏滚动效果原创 2022-12-20 16:27:00 · 1382 阅读 · 0 评论 -
vue项目中blur和click事件冲突
blur和click事件blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以。click事件:当点击元素时触发click事件;所有元素都有此事件,会产生冒泡。因为JS是单线程,同一时间只能处理一个事件,且blur执行顺序优先click。介于此我用了简单粗暴的方法,将click事件换成了mousedown事件其实还有其他方法,这篇博文里讲述的比较详细些【解决blur与click冲突】...原创 2021-02-04 16:53:47 · 3668 阅读 · 0 评论 -
vue3.0之组合API(Composition API)
vue3.0组合API一、ref下面是ref的使用 代码片。注意:ref只能监听简单类型的变化,不能监听复杂类型的变化(数组/对象) 复杂类型使用reactive监听,示例: import {reactive} from 'vue'; let s = reactive({a:[]})//App1.vue <template> <div> <p>{{count}}</p> <input @cli原创 2020-12-15 20:09:41 · 780 阅读 · 0 评论 -
vue3.0<Suspense>组件使用时内容不显示
在使用Suspense组件时,写下了如下结构的代码之后发现内容不显示并且控制台会有警告提示:原因是template里的内容需要有一层div包裹,改成如下格式就可以了:原创 2021-02-04 16:42:07 · 1835 阅读 · 0 评论 -
vue监听store.state中对象的变化不起作用
store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码:// state.jsnoticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null} ]// 所引用组件export default { methods: { profileJump(p原创 2021-06-23 16:00:24 · 5149 阅读 · 3 评论 -
antdv 报错 ReferenceError: h is not defined
源代码如下<template> <div class="notice-table"> <a-table :columns="columns" :data-source="list" size="middle" :pagination="{ pageSize: 10 }" :customRow="rowClick" > <template slot原创 2021-06-23 10:23:22 · 1591 阅读 · 0 评论 -
vue provide / inject实现页面刷新
需求中有刷新路由的必要,原生reload页面体验很不友好,所以选择了 provide / inject 选项。vue文档中是这样描述的:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效示例:// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 子组件注入 'foo'var Child = { inject:原创 2021-06-11 16:30:41 · 247 阅读 · 1 评论 -
antdv vue upload自定义上传结合表单提交
表单内联多个文件上传组件使用antdv的upload组件时发现个怪异的问题,上传文件状态每次改变后都会触发change事件,所以上传成功、失败、删除都会触发,而怪异的就是删除后触发change,见下图就算返回是空的,但只要出发了change,change都会默认返回如下结构的对象:{ file: { /* ... */ }, fileList: [ /* ... */ ]}也因为如此,每次表单提交的时候就算没有附件也不会去校验,所以放弃了upload组件的change事件,采用表单的原创 2021-06-10 20:40:29 · 2837 阅读 · 0 评论