csv导出时动态添加表头

需求：导出的csv文件，在前端页面上table的标题显示哪些标题，导出的csv文件的标题就要和前端页面的table的标题保持一致，并且前端页面上的table的标题可以通过动态的添加或移除

标题选择弹窗

筛选后的标题：

筛选后的前端页面的展示：

要求：导出的csv文件展示的字段要和table页面展示的数据一致

代码实现

<el-button type="primary" @click="onExport">导出</el-button>


methods: {
    beforeExport(item) {
        // newArr 就是拿到的前端页面的table标题 => [{},{},{}...]
        const newArr = this.SortableTable.checkList.length > 0 ?this.SortableTable.checkList.filter(item => item.isCheck) : this.labelList.filter(item => item.isCheck);
        const obj = {};// 存放导出的对应的属性值
        Object.keys(item).forEach(key_item => {
          newArr.forEach(item1 =>{
            if(!obj.hasOwnProperty(item1.prop)){
              obj[item1.prop] = '';
            } else {
              if(item1.prop == key_item){
                obj[item1.prop] = item[item1.prop];
                reslove(obj);
              }
            }
          });
         });
       });
    }

    onExport() {
        const fileName = `External order`;
        if(!this.selectedRows.length){
          this.$message.warning('至少选择一条数据！');
          return;
        }
        let csvData = [];
        // this.selsectedRows为一个数组对象结构：
        // [{age:1,name:'xixi'},{age:2,name:'haha'}...]
        this.selsectedRows.forEach(async (item)=>{
            await this.beforeExport(item)
            .then(res => {
                csvData.push(res)
            });
        });
        
        setTimeout(()=>{
          if(!csvData.length) return;
          const csv = papa.unparse(csvData);
            const data = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const csvURL = window.URL.createObjectURL(data);
            const download = document.createElement('a');
            download.href = csvURL;
            download.setAttribute('download', fileName);
            download.click();
            document.body.removeChild(download);
            csvData = null;
        },500)
    }
}