代码拉取完成，页面将自动刷新
引言：
最近使用vue在做一个后台系统，技术栈 vue + iView，在页面中生成表格后，
iView可以实现表格的导出，不过只能导出csv格式的，并不适合项目需求。
Blob.js和Export2Excel.jsnpm install file-saver --save 用来生成文件的web应用程序npm install xlsx --save 电子表格格式的解析器npm install script-loader --save-dev 将js挂在在全局下columns列 和dataList 行，来渲染的 columns为表头数据dataList为表实体内容column: [
{
'key': 'novelId',
'title': 'ID',
'align': 'center',
'width': 150,
'ellipsis': true,
render: (h, params) => {
return h('div', [
h('span', {
attrs: {
class: 'box',
'data-clipboard-text': params.row.novelId
},
on: {
'click': (data, b) => {
var clipboard = new Clipboard('.box')
}
}
}, params.row.novelId)
])
}
},
{
'key': 'imageUrl',
'title': '封面',
'align': 'center',
'width': 100,
render: (h, params) => {
return h('div', [
h('img', {
attrs: {
src: params.row.imageUrl,
alt: '封面'
},
style: {
'width': '36px',
'height': '48px',
'verticalAlign': 'center'
},
on: {
'click': (data, b) => {}
}
}, '编辑')
])
}
},
{
'key': 'title',
'title': '小说名',
'align': 'center',
'width': 120
},
{
'key': 'categoryName',
'title': '二级分类',
'align': 'center',
'width': 100
},
{
'key': 'author',
'title': '作者',
'align': 'center',
'width': 150
},
{
'key': 'completeStatus',
'title': '进度',
'align': 'center',
'width': 100,
render: (h, params) => {
return h('div', [
h('span', {}, params.row.completeStatus * 1 === 1 ? '完结' : '未完结')
])
}
},
{
'key': 'updateTime',
'title': '更新时间',
'align': 'center',
'width': 150
},
{
'key': 'status',
'title': '状态',
'width': 100,
'align': 'center',
render: (h, params) => {
return h('div', [
h('span', {}, params.row.status * 1 === 1 ? '有效' : '无效')
])
}
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 120,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '8px'
},
on: {
'click': (data, b) => {
global.addTab('编辑小说', 'novelEdit?novelId=' + params.row.novelId + '&parentId=' + this.currentId)
}
}
}, '编辑'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
'click': (data, b) => {
const statusMsg = params.row.status === 1 || params.row.status === '1' ? '确认禁用?' : '确认启用?'
const _this = this
_this.statusModel = true
_this.$Modal.confirm({
title: '提示',
content: `<p>${statusMsg}</p>`,
onOk: () => {}
})
}
}
}, params.row.status === 1 || params.row.status === '1' ? '冻结' : '启用')
])
}
}
],
dataList 这里就不写了
在build 目录下webpack.base.conf.js配置 我们要加载时的路径
alias: {
'vendor': path.resolve(__dirname, '../src/vendor'),
}
当我们要导出表格执行@click事件调用export2Excel函数
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
const _this = this
require.ensure([], () => {
const { export_json_to_excel } = require('../vendor/Export2Excel');
const tHeader = ['ID', '封面', '小说名','二级分类','作者','进度','更新时间', '状态'];
const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];
const list = _this.dataList;
const data = _this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '小说列表');
})
}此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手