基于Vue+element-ui 的Table二次封装的实现

{ this.exporttableData = re.data; this.tableData4 = []; re.data.map(item => { this.tableData4.push({ name: item.fldTableDesc,point: { visible: false,value: '' },item: { visible: true,value: item.ItemList } }) }) },(error) => { this.$message({ customClass: 'el-message_new',message: error,type: 'error' }); }) },handleSelectionChange(val) { console.log(val) this.multipleSelection = val; },focuspoint(val) { this.currentpoint = val; },focusitem(val) { this.currentitem = val; this.itemdialogshow = true; },itemconfirm() { this.itemdialogshow = !this.itemdialogshow; },itemhandleClose(done) { this.itemdialogshow = false; },ItemGroupSelectchange(val) { this.checkeditem = val; console.log(this.checkeditem); let groupitemcontent = []; val.map(item => { groupitemcontent.push(item.fldItemName); }) this.currentitem.value = groupitemcontent.join(','); },submit() { if (this.multipleSelection.length > 0) { let message = ""; let data = []; let name = ""; this.multipleSelection.map((item,index) => { name = item.name; let str = item.name; let info = false; if (item.item.visible && item.item.value == "") { message += `表[${str}]请选择因子`; info = true; } if (item.point.visible && item.point.value == "") { if (info) { message += `、请选择测点/断面！`; } else { message += `表[${str}]请选择测点/断面！`; } info = true; } if (info) { message += "
" } data.push({ "AutoID": "1","STCode": "","PCode": "","RCode": "","RScode": "","GDCODE": "","type": this.moduletype,"itemcodeList": item.item.value.split(',').join('^'),"path": `${this.path.TempletExportSetting}${this.moduletype}.json`,"IsNeedNullData": "Y" })

})
if (message == "") {
 GetTempletExportInfo(data).then(re => {
  if (re.status == "ok") {
   var exportdata = eval((re.data));
   const { export_json_to_excel } = require("../../../libs/Export2Excel");
   if (exportdata[0].merg.length != 0) {
    var exdata = [];
    var itemlistUnit = [];
    var itemlistfldCharCode = [];
    for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) {
     itemlistUnit.push(exportdata[0].head[z]);
     itemlistfldCharCode.push(exportdata[0].head[z])
    }
    this.checkeditem.map(item => {
     itemlistUnit.push(item.fldUnit);
     itemlistfldCharCode.push(item.fldCharCode);
    })
    var exdata = this.formatJson(exportdata[0].head,exportdata[0].data);
    exdata.unshift(itemlistUnit);
    exdata.unshift(itemlistfldCharCode);
    exdata.unshift(exportdata[0].head);
    console.log(exdata)
    exportdata[0].merg.push([0,exportdata[0].head.length - 1,0])
    export_json_to_excel([name],exdata,name,exportdata[0].merg);
   } else {
    var exdata = this.formatJson(exportdata[0].head,exportdata[0].data);
    exdata.unshift(exportdata[0].head);
    exportdata[0].merg.push([0,exportdata[0].merg);
   }

  } else {
   this.$message({
    message: '导出失败！',type: 'error'
   });
  }
 })
} else {
 this.$message({
  dangerouslyUseHTMLString: true,customClass: 'el-message_new',message: message,type: 'warning'
 });
}

} else {
this.$message({
customClass: 'el-message_new',message: '请先选择要导出的列表！',type: 'warning'
});
}
},formatJson(filterVal,jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
}
}
}