Parece que no están manteniendo el código desde hace mas de 2 años, pero puedes resolver el problema de 2 formas, la primera y mas "intrusiva" es la de traerte su componente y modificarlo y la segunda es con un componente asíncrono.
La segunda opción sería algo así:
const AsyncComponent = () => ({
// The component to load (should be a Promise)
component: import('./MyComponent.vue'),
// A component to use while the async component is loading
loading: LoadingComponent,
// A component to use if the load fails
error: ErrorComponent,
// Delay before showing the loading component. Default: 200ms.
delay: 200,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
timeout: 3000
})
Para que veas una solución implementada he creado un sandbox con la primera opción:
Verás que hay una carpeta con el componente importado vue-xlsx-table. Dentro he modificado vue-xlsx-table.vue para que tenga una variable loading y gestionar su estado en el template:
<!-- Añado la variable loading para gestionar cuando está cargando -->
<button type="button" class="xlsx-button" @click="handleUploadBtnClick" :disabled="loading">
<span v-if="loading">Loading</span>
<span v-if="!loading">
<slot></slot>
</span>
</button>
y en el método de manejo del fichero:
handleFileChange(e) {
console.log("handling");
if (this.rawFile !== null) {
return;
}
this.loading = true;// incializo loading
this.rawFile = e.target.files[0];
this.fileConvertToWorkbook(this.rawFile)
.then(workbook => {
let xlsxArr = XLSX.utils.sheet_to_json(
workbook.Sheets[workbook.SheetNames[0]]
);
this.workbook = workbook;
this.initTable(this.xlsxArrToTableArr(xlsxArr));
})
.catch(err => {
console.error(err);
})
.finally(fin => { // finally para reiniciar loading
console.log("end");
this.loading = false;
});
},