iview表格导出csv遇到的几个问题以及解决方法（序号、日期） |
您所在的位置：网站首页 › excel表格序号变成日期 › iview表格导出csv遇到的几个问题以及解决方法（序号、日期） |
iview表格导出csv遇到的几个问题以及解决方法（序号、日期）
|
序号丢失 一般来说我们在渲染表格的时候后台不会把序号返给我们，我们一般都类似官网那样使用type:index，但是这样有个缺点，就是表格第二页因为重新获取数据并且赋值，第二页的内容序号会从1开始。这个时候我们就需要使用render方法了，根据后台返回的当前页码和当前分页数计算获取当前行的序号。
columns:[{
title:'序号'
type: 'index',
width: 60,
align: 'center'
render: (h, params) => {
//因为下标从零开始，所以加1，(当前页-1)*当前页的条数
return h('span',params.index+1+(this.currentPage-1)*this.pageNum)
}
},
...
]
导出序号丢失的原因是exportCsv方法只认key值，所以要解决这个问题就是在获取到数据之后，在每一项数据之后追加一个序号，如index:1这样 columns:[{ key:index, width: 60, align: 'center' }, ... let data = res.data.data //这里获取到了数据 //tableData为表格数据 let tableData=data.map((item,index)=>{ item.index = index return item }) 日期格式错误我原本是以为excel的关系，下面是原解答。 从图片上可以看出，直接在单元格里面输入日期的话，单元格会自动把输入的日期更换格式，如果输入=“日期”，单元格会按原样输出，长数字也是一样的道理。所以在有些博客上的处理方法就是在exportCsv方法里面的参数里面处理日期，在日期前面加上=号
this.$refs.table.exportCsv({
filename: '测试',
columns: this.columns,
data: this.data.map(item =>{
item.date = '="'+item.date+'"'
return item;
})
});
这样的确可以导出正确的格式，但是有两个问题，第一个问题就是页面上日期的字段会变成=“日期”，出现这个的原因是导出的时候在data里面改变了原数组。第二个问题就是如上图的那样，按照原样导出，不过单元格里面的内容不受单元格宽度控制（其实也不是什么大问题），类似于css的overflow。 解决方法就是使用深度复制，一种深度复制的方法就是JSON.parse(JSON.stringfy(data))。 singlePage(){ let tableDataTemp = JSON.parse(JSON.stringify(this.tableData)) this.$refs.table.exportCsv({ filename: '单页', data:tableDataTemp, column:this.tableColumns1 }) },这样就解决了导出时候修改页面值的问题。这样修改之后导出的日期会变为####，增加单元格的宽度就可以看到日期了。类似于css的overflow:hidden。 |
【本文地址】
今日新闻 |
推荐新闻 |