Files
mes-ui-d2/src/pages/demo/plugins/import/csv.vue
liyang 4f1cae7cf1 优化显示
Former-commit-id: 89ad340ecdac7fcdab90b8ca8f47db010dc76663 [formerly 89ad340ecdac7fcdab90b8ca8f47db010dc76663 [formerly 89ad340ecdac7fcdab90b8ca8f47db010dc76663 [formerly 89ad340ecdac7fcdab90b8ca8f47db010dc76663 [formerly f442f4ff467ea33891fe1e33f01e68e3ac3b53ed [formerly 74c3879229b997ccea75948f385301f99c51f7ba]]]]]
Former-commit-id: 5fae8706e10613cdb8993823e5073ea568657f14
Former-commit-id: 65fdaaf521c9de7899d8c6f511314047cbc723ac
Former-commit-id: f77d53578471856768e159705bfe22a5dd677649 [formerly 5e40c474981cde955033689d11a04c4049430f05]
Former-commit-id: ace65a966ad839d8978cc74c5f2f371b44e30d8f
Former-commit-id: 97adc9f9618eddb2de06bcb9a2b3ab5888a1c7b2
Former-commit-id: 24b68e66e33ad367ddd005a54660f7ec47c8f6f0
Former-commit-id: 5a15749aa99cbbca48f289db1f76b38f6d9bfb76
Former-commit-id: 8c8fd8221046166f1b1b2b4582cfc63ec2d0593c
2018-07-21 15:52:44 +08:00

60 lines
1.3 KiB
Vue

<template>
<d2-container type="card">
<template slot="header">导入 csv</template>
<div class="d2-mb">
<el-button @click="download">
<d2-icon name="download"/>
下载演示 .csv 表格
</el-button>
</div>
<div class="d2-mb">
<el-upload :before-upload="handleUpload" action="default">
<el-button type="success">
<d2-icon name="file-o"/>
选择要导入的 .csv 表格
</el-button>
</el-upload>
</div>
<el-table v-bind="table">
<el-table-column
v-for="(item, index) in table.columns"
:key="index"
:prop="item.prop"
:label="item.label">
</el-table-column>
</el-table>
</d2-container>
</template>
<script>
export default {
data () {
return {
table: {
columns: [],
data: [],
size: 'mini',
stripe: true,
border: true
}
}
},
methods: {
handleUpload (file) {
this.$import.csv(file)
.then(res => {
this.table.columns = Object.keys(res.data[0]).map(e => ({
label: e,
prop: e
}))
this.table.data = res.data
})
return false
},
download () {
window.location.href = 'http://fairyever.qiniudn.com/d2-admin-import-csv-demo.csv'
}
}
}
</script>