有大佬知道VUE导出功能组件和弹窗不能同步使用吗？

测试狂人 2021-04-26 07:31:19

大神们，有个问题请教下你们，download-excel和 this.$confirm这个弹出方式不能公用吗？点击确定不能导出。不用this.$confirm时可以正常使用的。

具体步骤：
我下载了导出插件 npm install vue-json-excel -S
然后引用 import JsonExcel from 'vue-json-excel';

第一步：我先写组件（这个是做成按钮的样式）



<download-excel class="blueBtn" :data="json_data" :fields = "json_fields" id="blueBtnDownload"

              worksheet = "My Worksheet" :name="excelName" ref="blueBtnDownload"

>

        <el-button type="warning" icon="el-icon-top-right" @click="bn_openExport()">批量导出 </el-button>

</download-excel>

第二部：data数据定义



data(){

    return{

            //批量导出

            excelName:"表格名称"//要导出表格的名称

            json_fields: {  //导出Excel表格的表头设置

                 'name': 'name',

	          'age': 'age',

	          'sex': 'sex',

	          'number': 'number',

            },

            json_data:[],//导出的表格内容，注意都是字符串

    }

}

第三步：写方法



bn_openExport(){

           //给表格内容赋值

            var value = this.value; //假设这是你后台获取的内容，或者是你table表格的内容,shi json格式

            for(let i=0;i<test.length;i++){

                  this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})   

              }   

}

做完以后，点击按钮，是可以正常导出的，格式数据啥的都没有错误；

问题来了，我是想添加一个提示框，用户确定后在导出，所以我使用this.$confirm的弹框方式



 this.$confirm('你确定要导出吗？', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

 

    }).then(()=>{

       //用户点击了确定按钮，执行

        //假设这是你后台获取的内容，或者是你table表格的内容,shi json格式

       var value = this.value;

       for(let i=0;i<value .length;i++){

         //我们把需要导出的值导出，json格式

         this.json_data.push(   

 {"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number}

         );

       }

 

    }).catch((err)=>{

        this.$message({

              message: "用户点击了取消",

              type: "info",

        });

    });

点击了按钮后发现没有响应，.then(()=>{}里面的东西都不执行，里面的内容没有啥变化，点击了打印，是可以正常进入到里面，但是就是导出没有反应，目前我猜这个download-excel组件的功能在点击按钮的时候已经执行过一次了，在加个弹框，再次点击确定按钮，第二次操作时没有执行的。

我试过el-button和download-excel这个分开，然后点击@click="bn_openExport()"按钮事件的时候，document.getElementById("blueBtnDownload").click再去模拟点击它download-excel导出，还是没有反应。用ref方式this.#refs.blueBtnDownload.click也不行。

大神们，像这种情况怎么解决？

...全文