You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.3 KiB
83 lines
2.3 KiB
<template> |
|
<div class="wrap"> |
|
<div class="inner"> |
|
<el-page-header @back="$router.back()" content="excel预览" style="margin-bottom: 20px"></el-page-header> |
|
<el-table :data="list" class="cus-table" ref="table" stripe header-align="center" v-loading="loading" @selection-change="handleSelectionChange"> |
|
<el-table-column type="selection" width="80" align="center"></el-table-column> |
|
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
|
<el-table-column v-for="(item,index) in list[0]" :prop="index" :key="index" :label="index" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
path: this.$route.query.path, |
|
loading: false, |
|
list: [], |
|
multipleSelection: [] |
|
}; |
|
}, |
|
mounted(){ |
|
this.getData() |
|
}, |
|
methods: { |
|
// 获取列表 |
|
getData() { |
|
this.loading = true |
|
this.$post(`${this.api.lookExcel}?excelUrl=${this.path}`).then(res => { |
|
const { data } = res |
|
if (data.length) { |
|
const result = [] |
|
// 如果每个字段都是空，则不显示该行 |
|
data.map(e => { |
|
let valid = false |
|
for (const i in e) { |
|
if (e[i]) { |
|
valid = true |
|
break |
|
} |
|
} |
|
valid && result.push(e) |
|
}) |
|
this.list = result |
|
this.loading = false |
|
} |
|
}).catch(res => { |
|
this.loading = false |
|
// 后端读取失败，就直接打开该excel，并返回我的数据列表 |
|
window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.path) |
|
this.$router.back() |
|
}) |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.wrap { |
|
padding: 20px; |
|
background-color: #f3f6fa; |
|
.inner { |
|
padding: 15px; |
|
background-color: #fff; |
|
border-radius: 4px; |
|
} |
|
.tool { |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 20px 0; |
|
} |
|
.action { |
|
display: inline-flex; |
|
} |
|
.copy { |
|
margin-left: 5px; |
|
cursor: pointer; |
|
} |
|
} |
|
</style> |