禁止弹窗再使用disabled时出现了问题，写死成true或者false测试一波可以实现，但增加后端接口判断，动态赋值时出现问题了，disabled绑定的值确实是可以动态改变（console.log()查看），但是窗口却一直可以打开。当时就怀疑是异步的问题，就在使用async和await，也还是一样
Google解决
Google对应方案，目前只看到两种，一是disabled禁用（已证实不可行），二是通过e.stopPropagation()来阻止事件传播，第二个方案也不行，因为阻止后，没有对应的启用方法，打个比方Java中的try/catch，我捕获了异常，我处理完成后不能再往上抛出去了。对于第二种方式，去查了下相关资料，了解到js中的冒泡事件机制，它有点像栈，捕获的时候，从最外层到最内层，传播时从最内层到最外层。以如下代码为例，每个div上都有click事件，最内层时一个button按钮，也有对应的click事件，当js去捕获这些事件时，是从外层的f4到f1的顺序，当我们点击这个button时，button的click事件后，他会继续向上传递，所有的click执行顺序时f1->f2->f3->f4。
<div @
click
=
"f4"
>
<div @
click
=
"f3"
>
<div @
click
=
"f2"
>
<a-button @
click
=
"f1"
>test</a-button>
再了解js冒泡事件机制后，当时就想到了那可不可以先阻止事件，再通过模拟点击的方式将点击事件向上传播，经过一番调式，功能完美实现，如下所示（代码下面只展示了重要部分），html中再button的外层增加一个div，并绑定一个唯一id（我这里时流程code）点击上传按钮时，先默认阻止事件传播，再去判断，通过后使用
document.getElementById(record.processDefinitionCode).click()
模拟点击button父级的div，这样继续将事件向上传递，又不会触发button的click事件导致死循环
<a-card :bordered="false">
<a-table
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSourceUpload"
:loading="loading"
class="j-table-force-nowrap"
@change="handleTableChange"
<span slot="url" slot-scope="text, record">
<a :href="record.downloadurl"> {{ record.datatype }}下载链接 </a>
</span>
<span slot="type" slot-scope="text, record">
<a-upload
name="file"
:showUploadList="false"
v-has="'srbmp_business:import'"
:multiple="false"
:headers="tokenHeader"
:action="record.action | formatAction"
@change="handleImportExcel"
<div :id="record.processDefinitionCode">
<a-button type="primary" icon="import" @click="(e) => openProcessDefinition(e, record)"
>导入{{ record.datatype }}</a-button
</a-upload>
</span>
</a-table>
</a-card>
async openProcessDefinition(e, record) {
// 利用js冒泡事件机制和模拟点击事件来实现a-upload组件的弹出框限制
// 点击上传button按钮默认阻止冒泡事件传递
e.stopPropagation() // 阻止事件冒泡到父元素
this.processDefinitionCode = record.processDefinitionCode
const ref = await getAction(`/scheduler/get/task/${record.processDefinitionCode}`)
if (ref.code != 200) {
this.$message.error(ref.message)
} else {
if (!ref.result || ref.result.state !== 1) {
// 校验通过，模拟点击button按钮的上级div，将点击事件冒泡传递到a-upload上打开选择文件窗口
document.getElementById(record.processDefinitionCode).click()
} else {
this.$message.warning(`${record.datatype}流程正在进行中，请稍后再试！`)
12345芝麻糖葫芦
Java开发
粉丝
