解决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>
elementui_dialog_75">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 = falseopenDialog() {this.showDialog = true}changeDialog(v) { // 关键代码this.showDialog = v}
}
</script>子组件 (Child.vue)
<template><div><el-dialogwidth="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 = falsehandleCancel() {this.$emit('changeDialog', false) // 关键代码}
}
</script>
elementui_dialogeldialog_139">多种方案教你解决：vue + elementui 使用dialog弹出框，el-dialog双滚动条、页面抖动问题
解决当el-dialog 弹窗后页面内容很多，导致页面有两个滚动条，el-dialog和body都有滚动条，如何解决弹框后，去掉或者隐藏外面body的滚动条
上代码
方案1：添加 :lock-scroll=“false”
<el-dialogtitle="":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;....此处省略一些设置滚动的代码
}
elementui__elinput__165">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-inputv-model="item.reason"placeholder="Please state the reason"@input="updateView($event)"></el-input></div>updateView() {this.$forceUpdate();}elementui__elcheckboxgroup_elcheckbox_194">vue + elementui 使用 el-checkbox-group ，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
解决方案
动态设置值，强制更新视图
<el-checkbox-group v-model="optionsSelected"><divv-for="(item, index) in optionList":key="item.keyName"><el-checkboxv-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">
<divv-for="(item,index) in optionList":key="index"><el-checkboxv-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) // 关键作用代码，去除文件列表失败文件
待继续补充
结语
- 今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
