no message

Former-commit-id: 5ad7ba5e0ab03190c9d778ccf41d9bef4c7eb7c8
Former-commit-id: f4b384d5efbec542b2953009e99338b3cb3bed63
Former-commit-id: f9914c43cef036556edd17c04ca7424078fbb2c7
This commit is contained in:
李杨
2018-02-15 23:24:31 +08:00
parent bc6b701769
commit 34630dca3b
4 changed files with 70 additions and 19 deletions

View File

@@ -21,6 +21,11 @@ export default {
type: String, type: String,
required: false, required: false,
default: '' default: ''
},
highlight: {
type: Boolean,
required: false,
default: false
} }
}, },
data () { data () {
@@ -55,7 +60,7 @@ export default {
}, },
marked (data) { marked (data) {
return marked(data, { return marked(data, {
highlight: (code) => highlight.highlightAuto(code).value ...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {}
}) })
} }
} }

View File

@@ -46,7 +46,7 @@ export default {
}, },
methods: { methods: {
handleUpload (file) { handleUpload (file) {
this.$import.excel(file) this.$import.xlsx(file)
.then(({header, results}) => { .then(({header, results}) => {
this.table.columns = header.map(e => { this.table.columns = header.map(e => {
return { return {

View File

@@ -19,8 +19,8 @@ export default {
}) })
}) })
}, },
// 导入 excel // 导入 xlsx
excel (file) { xlsx (file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
const fixdata = data => { const fixdata = data => {

View File

@@ -1,26 +1,72 @@
解析 CSV 文件使用 [PapaParse](https://github.com/mholt/PapaParse) # Vue.$import
本框架集成了数据导入功能,并包装成插件
## 注册插件
> 默认已经注册,可以直接使用
``` ```
// 导入插件 import pluginImport from '@/plugin/import'
import papa from 'papaparse' Vue.use(pluginImport)
```
//在选择文件后处理数据 之后就可以在组件中使用 `this.$import` 来调用导出功能
## Vue.$import.csv()
导入csv文件并且返回一个 `Promise` 对象
参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| file | 选择的文件 | 是 | File | | |
使用
```
// 在选择文件后调用
handleUpload (file) { handleUpload (file) {
papa.parse(file, { this.$import.csv(file)
header: true, .then(res => {
skipEmptyLines: true, this.table.columns = Object.keys(res.data[0]).map(e => ({
complete: (results, file) => {
// 设置表格列
this.table.columns = Object.keys(results.data[0]).map(e => ({
label: e, label: e,
prop: e prop: e
})) }))
// 表格赋值 this.table.data = res.data
this.table.data = results.data
}
}) })
// 阻止默认的上传
return false return false
} }
``` ```
> 详细的papaparse使用API请移步官网文档 ## Vue.$import.xlsx()
导入xlsx文件并且返回一个 `Promise` 对象
参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| file | 选择的文件 | 是 | File | | |
使用
```
// 在选择文件后调用
handleUpload (file) {
this.$import.xlsx(file)
.then(({header, results}) => {
this.table.columns = header.map(e => {
return {
label: e,
prop: e
}
})
this.table.data = results
})
// 阻止默认的上传
return false
}
```