this.tableAndMap=1;
}
ev.stopPropagation();
},
exportExcel : function(indicatorName,my){
debugger;
console.log(indicatorName);
var listAndList = JSON.parse(JSON.stringify(this.initData.indicatorResult));
var rowTd = listAndList.rowKeys;
var excellData=[];
rowTd.splice(0,0,indicatorName);
excellData.push(rowTd);
for(var i = 0;i<listAndList[indicatorName].length;i++){
var rowTr = listAndList[indicatorName][i];
rowTr.splice(0,0,listAndList.colKeys[i]);
excellData.push(rowTr);
}
return ExcellentExport.excelByData($("."+indicatorName)[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls');
}
},
watch : {
initData : function(newValue){
this.indicators=this.listToRowObject(newValue);
}
},
mounted : function(){
}
});
Vue.set(panelsVue,'initData',ListAndList);
在使用上述组件过程中，发现当转置和表格切换之后里面全部都有变化，虽然可以做到单个panel组件自己实现转置和切换，但是发现如果数据太多会导致页面卡死，为了性能优化所以后来考虑采用多vue对象的形式（虽然我的思路是如果改变数据之后，vue将重新渲染html，导致页面卡死，但是后来仔细查资料之后，发现vue当数据改变之后会复用原来相同的html。但是由于时间的原因，也没试。大家可以考虑一下）
采用多vue对象的形式之后的页面
html
<div class="resultDiv"></div>js,panel组件
var panelsVueArr = [];
var responseData;
function createHtml(respData){
var indicatorResult = respData.indicatorResult;
var indicators = [];
for(var j=0;j<indicatorResult.indicatorNames.length;j++){
var indicator = {};
indicator["indicatorName"]=indicatorResult.indicatorNames[j];
indicator["indicatorUnit"]=indicatorResult.indicatorUnits[j];
indicator["rowKeys"]=indicatorResult.rowKeys;
indicator["colKeys"]=indicatorResult.colKeys;
indicator["indicatorData"]=indicatorResult[indicatorResult.indicatorNames[j]];
indicators.push(indicator);
}
for(var i =0;i<indicators.length;i++){
var el = $("<div></div>");
$(".resultDiv").append(el[0]);
var vueObj = new Vue({
el : el[0],
template : '<div id="panels"><el-collapse><el-collapse-item>'+
'<template slot="title"><span class="resulticon">{{item.indicatorName}}({{item.indicatorUnit}}) <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="exportExcel" data-command="show" title="保存为表"></a>'+
