elementui excel复制进去文本处理成tabal表格数据
时间: 2023-09-09 11:14:25 浏览: 98
可以使用 ElementUI 中的 `<el-table>` 组件来展示 Excel 中的数据。要将 Excel 中的数据转换为表格数据,可以使用 SheetJS 库将 Excel 文件解析为 JSON 数据。下面是一个示例代码:
```html
<template>
<div>
<el-upload
:before-upload="beforeUpload"
:on-success="handleSuccess"
:file-list="fileList"
>
<el-button>导入Excel文件</el-button>
</el-upload>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
fileList: [],
tableData: []
}
},
methods: {
beforeUpload(file) {
this.fileList = [file]
return false
},
handleSuccess(response) {
const reader = new FileReader()
reader.onload = () => {
const data = new Uint8Array(reader.result)
const workbook = XLSX.read(data, { type: 'array' })
const sheetName = workbook.SheetNames[0]
const sheet = workbook.Sheets[sheetName]
const json = XLSX.utils.sheet_to_json(sheet)
this.tableData = json
}
reader.readAsArrayBuffer(this.fileList[0].raw)
}
}
}
</script>
```
在这个示例中,我们使用了 ElementUI 的 `<el-upload>` 组件来让用户上传 Excel 文件。然后我们使用 SheetJS 库将 Excel 文件解析为 JSON 数据,并将其赋值给 `<el-table>` 的 `data` 属性来渲染表格。注意,我们需要使用 FileReader API 来读取 Excel 文件的内容。
阅读全文