1、话不多说先上图:
(.vue界面上的表格里展示的数据情况)
(导出数据到.csv文件里的情况)
2、csv文件字符型数据原理:
现象:
直接使用iview的exportCsv()函数导出带有正(+)负(-)号的表格数据时,我们会发现负号(-)仍然可以保留(且在表格中居右排列),而正号(+)却丢失了。
原理:
csv文件处理数值型的数据时,负数会保留负号,而正数默认没有+号,且居右显示;字符串居左显示,且单元格内容为:="字符串内容"。
3、代码实现:
exportScore () {
let that = this;
let newArr = JSON.parse(JSON.stringify(this.test_data)); //复制一层原数组列表,避免导出列表的data中对数组做出修改后界面数据也被修改
this.$refs.test_table.exportCsv({
filename: '成绩单',
original: false, //是否导出为原始数据,默认为true
columns: table_column,
data: newArr.map((item) => {
//对数据二次加工,在excel表中保留字符串类型
item.classRankChange = '= "'+item.classRankChange+'"' //比如:'="+20"'
item.gradeRankChange = '= "'+item.gradeRankChange+'"'
return item;
})
});
},
注意点:
(1)要先将原表格数据复制一层(这里采用深拷贝的方式),避免点击导出的时候,连页面上表格内的数据一起修改
let newArr = JSON.parse(JSON.stringify(this.test_data));
(2)exportCsv函数里的original配置项,值为false;
(3)exportCsv函数里的data配置项,用第(1)步骤中复刻的数组对数据进行二次加工,在数据开头拼接一个“=”,这样就可以保留+号啦~。