使用iview的exportcsv怎样导出嵌套数据

使用iviewTable组件导出CSV文件

<template>
<div>
    <Table :data="data" :columns="columns" ref="dataTable" />
    <button @click="exportData">导出数据</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            data:[
                {id:1,name:'名称1',category:{id:21,name:'类别21'}},
                {id:2,name:'名称2',category:{id:21,name:'类别21'}},
                {id:3,name:'名称3',category:{id:22,name:'类别22'}},
            ],
            columns:[
                {title:'名称',key:'name'},
                {title:'类别',key:'category',render:(createEl,params)=>
                createEl("span",params.row.category.name)},
            ]
        }
    },
    methods:{
        exportData(){
            this.$refs.dataTable.exportCsv({
                filename:'test_export',
                columns:this.columns,
                data:this.data
            })
        }
    }
}

上面代码,网页能正常显示数据:

名称 类别
名称1 类别21
名称2 类别21
名称3 类别22

但点击 导出数据 按钮后,导出的数据是这样的:

名称 类别
名称1 [object Object]
名称2 [object Object]
名称3 [object Object]

这种嵌套的数据正常的导出姿势是什么?求大神指导!!

回答:

理论来说只要把data里面object字段转成你要显示的内容字符串即可

exportData() {
  this.$refs.dataTable.exportCsv({
    filename: 'test_export',
    columns: this.columns,
    data: this.data.map(v => ({...v, category: v.category.name})),
  });
},

没用过这个框架,代码未实测

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注