no message
Former-commit-id: 5ad7ba5e0ab03190c9d778ccf41d9bef4c7eb7c8 Former-commit-id: f4b384d5efbec542b2953009e99338b3cb3bed63 Former-commit-id: f9914c43cef036556edd17c04ca7424078fbb2c7
This commit is contained in:
@@ -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} : {}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user