mes-ui-d2/docs/zh/sys-plugins/data-import.md

# 表格导入

本框架集成了数据导入功能，并包装成插件

## 注册插件

``` js
import pluginImport from '@/plugin/import'
Vue.use(pluginImport)
```

之后就可以在组件中使用 `this.$import` 来调用导出功能

::: tip
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
:::

## 导入 csv

导入csv文件，并且返回一个 `Promise` 对象

``` js
// 在选择文件后调用
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
}
```

## 导入 xlsx

导入xlsx文件，并且返回一个 `Promise` 对象

**注意 导入的表格文件第一行应为表头**

参考下述示例使用

``` js
// 在选择文件后调用
handleUpload (file) {
  this.$import.xlsx(file)
    .then(({header, results}) => {
      // header 为表头
      // results 为内容
      this.table.columns = header.map(e => {
        return {
          label: e,
          prop: e
        }
      })
      this.table.data = results
    })
  // 阻止默认的上传
  return false
}
```