Files
mes-ui-d2/docs/zh/sys-plugins/data-import.md
liyang eae8b9291e no message
Former-commit-id: d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly 074099c4c153f024958d3fda5cf710028e03d10a [formerly e73af225c96eb997a86122fc729dfadcdf846a4e]]]]]
Former-commit-id: d84a01a4aca85cd9e3891825ac7a152e12280d4e
Former-commit-id: 0412c82e909316b780fdd364ecabc78166c7cc0a
Former-commit-id: 9e648fdbc93f347265fed8bb56948adda020e1c9 [formerly 8b530e6e6979a9c25832339725619d9d0c8ce76f]
Former-commit-id: c12a2ae03243dd387e8c1d6496d6b3bb4148e149
Former-commit-id: 704f81678c7570f204cbe089e7497055c27e1328
Former-commit-id: 3879c040dcf291ef0f44745a5e791b360cde0f40
Former-commit-id: 0871c460804ea97eadf60bf3f0eaa8e147f3fb66
Former-commit-id: 188dd73a6cf49ecbf4cdedce1933f5a856c72b6f
2018-08-19 11:24:03 +08:00

1.2 KiB
Raw Blame History

表格导入

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

注册插件

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

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

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

导入 csv

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

// 在选择文件后调用
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 对象

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

参考下述示例使用

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