有大佬知道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也不行。

大神们,像这种情况怎么解决?



...全文
138 点赞 收藏 2
写回复
2 条回复
没人回我,我已经自己解决了。
回复 点赞
都没人会?大神呢?
回复 点赞
发动态
发帖子
其他
创建于2007-09-28

2768

社区成员

2.9w+

社区内容

Web 开发 其他
社区公告
暂无公告