56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
||
<Row :gutter="10">
|
||
<i-col span="6">
|
||
<Card>
|
||
<Upload action="" :before-upload="beforeUpload">
|
||
<Button icon="ios-cloud-upload-outline">上传Csv文件</Button>
|
||
点击上传Csv文件
|
||
</Upload>
|
||
<p>util.js提供两个方法用来实现这个功能：</p>
|
||
<p class="update-table-intro"><Icon style="margin-right: 10px;" :size="10" type="md-heart"/><span class="code-high-line">getArrayFromFile</span>：将Csv文件解析为二维数组</p>
|
||
<p class="update-table-intro"><Icon style="margin-right: 10px;" :size="10" type="md-heart"/><span class="code-high-line">getTableDataFromArray</span>：将二维数组转为表格数据，具体请看文档</p>
|
||
</Card>
|
||
</i-col>
|
||
<i-col span="18">
|
||
<Table :height="500" :columns="columns" :data="tableData"/>
|
||
</i-col>
|
||
</Row>
|
||
</template>
|
||
|
||
<script>
|
||
import { getArrayFromFile, getTableDataFromArray } from '@/libs/util'
|
||
export default {
|
||
name: 'update_table_page',
|
||
data () {
|
||
return {
|
||
columns: [],
|
||
tableData: []
|
||
}
|
||
},
|
||
methods: {
|
||
beforeUpload (file) {
|
||
getArrayFromFile(file).then(data => {
|
||
let { columns, tableData } = getTableDataFromArray(data)
|
||
this.columns = columns
|
||
this.tableData = tableData
|
||
}).catch(() => {
|
||
this.$Notice.warning({
|
||
title: '只能上传Csv文件',
|
||
desc: '只能上传Csv文件，请重新上传'
|
||
})
|
||
})
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.update-table-intro{
|
||
margin-top: 10px;
|
||
}
|
||
.code-high-line{
|
||
color: #2d8cf0;
|
||
}
|
||
</style>
|