VUE2常见问题以及解决方案汇总，vue+element ui 问题以及解决方案汇总（不断更新中）
解决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) // 关键作用代码，去除文件列表失败文件
待继续补充
结语
- 今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
