Specific steps:
I downloaded the export plug-in NPM install vue json - excel -s
Then refer to the import JsonExcel from 'vue - json - excel;
Step 1: I am writing component (this is to make the button style)
The second part: data data definition
Data () {
Return {
//bulk export
ExcelName: "table name"//to export form the name of the
Json_fields: {//export Excel table headers set
'name' : 'name',
'age' : 'age',
'sex' : 'sex',
'number' : 'number',
},
Json_data: [],//export form content, pay attention to is the string
}
}
Step 3: write method
Bn_openExport () {
//to form content assignment
Var value=https://bbs.csdn.net/topics/this.value;//assume that this is your backend access to content, or are you the contents of the table form, shi json format
for(let i=0; iEnclosing json_data. Push ({" name ": the value [I]. Name," age ": the value [I] the age," sex ": the value [I] sex," number ": the value [I] number})
}
}
After finish, click on the button, can be normal export format data what all have no wrong;
Question, I wanted to add a prompt box, the user is determined in the export, so I use this $confirm way of bounced
Enclosing $confirm (" are you sure you want to export? ', 'prompt', {
ConfirmButtonText: 'sure,
CancelButtonText: 'cancel',
Type: 'warning'
}). Then (()=& gt; {
//the user click the confirm button, execute
//assume that this is your backend access to content, or are you the contents of the table form, shi json format
Var value=https://bbs.csdn.net/topics/this.value;
for(let i=0; i//we need to export, export value json format
This. Json_data. Push (
{" name ": the value [I]. Name," age ": the value [I] the age," sex ": the value [I] sex," number ": the value [I] number}
);
}
}). The catch ((err)=& gt; {
This $message ({
Message: users to click on the "cancel",
Type: "info",
});
});
, found no response after click on the button, then (()=& gt; Everything inside the {} does not perform, not what the content of the changes, click on the print, can be normal to the inside, but there is no reaction is derived, at the moment, I guess this download - excel component function has carried out when click the button again, in the add a bullet box, click ok button again, the second operation is not performed,
I tried el - button and download - excel the separately, and then click @ click="bn_openExport ()" button in the event, the document. The getElementById (" blueBtnDownload "). Click again to simulate click download it - excel export, or don't respond, open the ref way this. # refs. BlueBtnDownload. Click also not line,
the great god, like how to solve this problem?