VUE2 常见问题和解决方案汇总(持续更新)
最编程
2024-10-09 14:51:13
...
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突,点击事件不生效(表格行点击事件和行内元素点击事件冲突)需要阻止事件冒泡
问题描述
1.点击列的编辑按钮,会触发按钮本身事件,同时会触发行点击事件
2.点击列的元素,会触发本身事件,同时会触发行点击事件
需求描述
点击列的元素,想要传参的同时,点击行内按钮不触发行点击事件,需要阻止事件冒泡
解决方案
需要分情况处理,如果按钮是以el开头的标签,我们可以为点击事件加.native.stop,如下:
<el-button type="text" size="medium" @click.native.stop="editControl(scope.row)">编辑</el-button>
如果按钮是以普通HTML标签,我们可以为点击事件加.stop,如下:
<i @click.stop="editControl(scope.row)">编辑</i>
理解vue @click.native .stop .self
事件修饰符概述
Vue.js 提供了一系列事件修饰符,这些修饰符可以帮助你更精细地控制事件的处理方式。以下是常用的几个修饰符:
- .stop:阻止事件冒泡。
- .prevent:阻止默认行为。
- .capture:使用捕获模式添加事件监听器。
- .self:只有当事件发生在元素本身而不是子元素时才触发。
- .native:直接绑定原生 DOM 事件,而不是 Vue 的合成事件。
vue子组件传递数据给父组件
子组件可以使用 $emit 向父组件传递数据。父组件监听这个事件,并在事件触发时接收数据。
上代码
子组件 (Child.vue)
<template>
<button @click="sendDataToParent">Send Data to Parent</button>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = { message: '我是子组件发送的数据哦' };
this.$emit('data-from-child', data);
}
}
}
</script>
父组件 (Parent.vue):
<template>
<div>
<child @data-from-child="receiveDataFromChild"></child>
<p>Data received from child: {{ dataFromChild }}</p>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
dataFromChild: null
};
},
methods: {
receiveDataFromChild(payload) {
this.dataFromChild = payload.message;
}
}
}
</script>
vue + elementui 使用dialog弹出框作为子组件,首次点击弹框可以显示,第二次点击弹框后赋值无法打开弹框
原因:子组件可以使用 $emit 向父组件传递数据,更新父组件里的弹框控制变量值。
上代码
父组件
<template>
<div>
<el-button @click="openDialog">Reset</el-button>
<TestDialog :show-dialog="showDialog" @changeDialog="changeDialog"></TestDialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
export default class Parent extends Vue {
showDialog = false
openDialog() {
this.showDialog = true
}
changeDialog(v) { // 关键代码
this.showDialog = v
}
}
</script>
子组件 (Child.vue)
<template>
<div>
<el-dialog
width="80%"
:visible.sync="showDialog"
title="上传图片"
:show-close="true"
close-on-click-modal="false"
append-to-body
@close="handleCancel"
>
<div>TestDialog </div>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({
props: {
showDialog: {
type: Boolean,
default: false,
},
},
components: {},
})
export default class Parent extends Vue {
showDialog = false
handleCancel() {
this.$emit('changeDialog', false) // 关键代码
}
}
</script>
多种方案教你解决:vue + elementui 使用dialog弹出框,el-dialog双滚动条、页面抖动问题
解决当el-dialog 弹窗后页面内容很多,导致页面有两个滚动条,el-dialog和body都有滚动条,如何解决弹框后,去掉或者隐藏外面body的滚动条
上代码
方案1:添加 :lock-scroll=“false”
<el-dialog
title=""
:visible.sync="showDialog"
:close-on-press-escape="false"
:show-close="false"
:lock-scroll="false" // 关键代码
:close-on-click-modal="false"
class="create-new-request-dialog"
width="70%"
>
方案2:修改样式
原理在于把弹框设置最大高度,不会超出屏幕,然后把内部的元素设置滚动就可以了
/* 设置弹框最大高 */
:deep(.el-dialog) {
max-height: 90vh !important;
....此处省略一些设置滚动的代码
}
vue + elementui 使用 el-input 无法输入的问题,打字不生效的问题(使用数组或者对象循环动态绑定)
解决方案
绑定@input事件,输入后实时更新视图
<el-input v-model="myObj.input1" @input="updateView($event)" />
<el-input v-model="myObj.input2" @input="updateView($event)" />
//methods
updateView(e) {
this.$forceUpdate()
}
代码案例
<div v-for="(item, index) in reasonList" :key="item.keyName">
<el-input
v-model="item.reason"
placeholder="Please state the reason"
@input="updateView($event)"
></el-input>
</div>
updateView() {
this.$forceUpdate();
}
vue + elementui 使用 el-checkbox-group ,动态循环生成el-checkbox后数据更新但是页面不更新,无法取消勾选,点击无效问题
解决方案
动态设置值,强制更新视图
<el-checkbox-group v-model="optionsSelected">
<div
v-for="(item, index) in optionList"
:key="item.keyName"
>
<el-checkbox
v-model="item.checked"
:label="item.keyName"
@change="
(val) => {
handleChange(val, item, 'checked');
}
"
>
<p v-html="item.label"></p>
</el-checkbox>
</div>
</el-checkbox-group>
handleControlPanelChange(val, item, key) {
this.$set(this.optionList[item.index], key, val); # 重点代码
this.$forceUpdate(); # 重点代码
}
vue2 部分组件赋值后无效,有的时候有效有的时候无效
解决方案1
初始化的时候整个对象设置为null,再重新赋值整个对象就会有更新了
解决方案2
vue el-checkbox 数组赋值后值变了,但是页面不更新状态,状态和值对不上
解决方案1
this.$forceUpdate();
解决方案2
this.optionList.splice(); // 更新视图
解决方案3
检查:如果你用的是el-checkbox-group,除了赋值的时候更改optionList,也要检查赋值一下optionSelected,两个数据不一致会导致异常哦
<el-checkbox-group v-model="optionSelected">
<div
v-for="(item,index) in optionList"
:key="index"
>
<el-checkbox
v-model="item.checked"
:label="item.keyName"
@change="
(val) => {
handleChange(val, item, 'checked');
}
"
>
<p v-html="item.label"></p>
</el-checkbox>
亲测管用:element中el-upload上传文件去掉文件列表,上传失败文件如何去掉-去除文件列表失败文件
let uid = fileParams.file.uid // 关键作用代码,去除文件列表失败文件
let idx = this.$refs.uploadFileComponent.uploadFiles.findIndex(item => item.uid === uid) // 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)
this.$refs.uploadFileComponent.uploadFiles.splice(idx, 1) // 关键作用代码,去除文件列表失败文件
待继续补充
结语
- 今天就写到这里啦~
- 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境,合作共赢
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
推荐阅读
-
VUE2 常见问题和解决方案汇总(持续更新)
-
前端笔试试题汇总及答案和说明(持续更新,最近更新时间为 23/10/22,目前有 31 道试题)
-
轻松系列开源免费流媒体音频和视频节目汇总(持续更新)
-
主要视觉技术竞赛获奖者和最佳解决方案集(持续更新)
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
安装和使用 Black Group Sunshine 的常见问题和解决方案 [不定期更新
-
Java和Spring Boot后端项目的常见问题全面解决方案(持续更新)