<el-upload class="upload-demo" action="http://localhost:40822/quotaSampling/upload"
:on-success="updateSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
:before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
<el-button size="small" type="primary">点击上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传xlsx,xls,csv,txt格式文件!</div>
</el-upload>
<el-table
:data="tableData"
border
:stripe="true"
:current-page.sync="excelCurrentPage"
style="width: 100%">
<el-table-column
v-for="(s, i) in head"
:prop="i + ''"
:label="s"
:key="i">
</el-table-column>
</el-table>
后端返回格式,el-table中使用数据 tableData以及head都是数组
// 上传成功后的钩子函数
updateSuccess(response) {
// 获得解析成功后的文件ID
this.fileId = response.data;
console.log(this.fileId);
axios
.get("http://localhost:40822/quotaSampling/getDataAll/" + this.fileId)
.then((res) => {
if (res.data.code === 200) {
var ret = res.data.data;
this.head = ret.head;
this.tableData = ret.data;
this.excelTotal = ret.data.length
console.log(res)
}
});
// 跳到下一步流程
this.active++;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件,本次选择了 ${
files.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${
file.name}?`);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件,本次选择了 ${
files.length} 个文件`
);
},