template el-dialog width=500px title=员工导入 visible=showExcelDialog close=$emitupdateshowExcelDialog false el-row type=flex justify=center div class=upload-excel i
The given code is a Vue component for an employee import dialog. It allows users to upload an Excel file containing employee information, and provides functionality to download an import template.
The component consists of an <el-dialog> element with a width of 500px and a title of "员工导入". The dialog is visible based on the value of the showExcelDialog prop, and it emits an event to update the prop value when it is closed.
Inside the dialog, there is an <el-row> element with the type and justify properties set to "flex" and "center" respectively. Inside this row, there is a <div> with the class "upload-excel".
The "upload-excel" div contains an <input> element of type "file" with the class "excel-upload-input". This input element is hidden and is used for selecting the Excel file.
Below the input element, there is a <div> with the class "drop". Inside the drop div, there is an <i> element with the class "el-icon-upload" which displays an upload icon. There is also an <el-button> element with the text "下载导入模板" which triggers the dowload method on click.
Next, there is a <span> element with event listeners for drag and drop events. It displays a message asking the user to drag and drop the file or click the "点击上传" button. The "点击上传" button triggers the handleUpload method on click.
Inside the span, there is another <input> element of type "file" with the same class as the previous one. This input element is also hidden and is used for selecting the Excel file. It triggers the uploadChange method on file change.
Below the "upload-excel" div, there is another <el-row> element with the type and justify properties set to "flex" and "end" respectively. Inside this row, there is an <el-button> element with the text "取消" which triggers the update:showExcelDialog event with a value of false on click.
The component also imports the getExportTemplate and uploadExcel functions from an API file and the FileSaver library for downloading the import template. It has a dowload method for downloading the template, dragend and drop methods for handling drag and drop events, handleUpload method for triggering the file input, uploadChange method for handling file change event, and upload method for uploading the file to the server
原文地址: http://www.cveoy.top/t/topic/iTlm 著作权归作者所有。请勿转载和采集!