一、計算
1.HTML
<div class="lomeo-table-content">
<el-table :data="rdata" :span-method="spanMethod" border style="width: 100%">
<el-table-column prop="category" label="類別" width="30">
<template slot-scope="scope">
<div v-html="zongxiang(scope.row.category)"></div>
</template>
</el-table-column>
<el-table-column prop="order" label="序號" width="30"></el-table-column>
<el-table-column prop="evalu" label="項目" width="30">
<template slot-scope="scope">
<div v-html="evaluFormatter(scope)"></div>
</template>
</el-table-column>
<el-table-column prop="tplContent" label="考評內容" width="340"></el-table-column>
<el-table-column prop="quantiNml.name" label="量化標準" width="100"></el-table-column>
<el-table-column prop="evaluNml.name" label="考評標準" width="100"></el-table-column>
<el-table-column prop="response" label="落實情況" width="240">
<template slot-scope="scope">
<div v-html="respFormatter(scope)"></div>
</template>
</el-table-column>
<el-table-column prop="dftDec" label="默認扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,0)"></div>
</template>
</el-table-column>
<el-table-column prop="selfDec" label="自評扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,1)"></div>
</template>
</el-table-column>
<el-table-column prop="dptDec" label="主管部門扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,2)"></div>
</template>
</el-table-column>
<el-table-column prop="leadDec" label="主管領導扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,3)"></div>
</template>
</el-table-column>
<el-table-column prop="tool" label="#" width="60"></el-table-column>
</el-table>
2.對源數據進行計算
/**
* 初始化合並參數表
*/
var cols = [
{
name: 'category', //參與計算的列名,必須和el-table-column prop='category'值一致
getValue(row) { //該列用於比較的值的獲取方法
return row.category;
},
},
{
name: 'order',
getValue(row) {
return row.evaluCategory.name;//行序號跟隨此列
},
},
{
name: 'evalu',
getValue(row) {
return row.evaluCategory.name;
},
}
];//參與合併的字段,在這裏增加即可
var loca = []; //合併座標與數量
for (var i in cols) {
loca.push({
rowSpan: 1,
colSpan: 1,
rowIndex: null,
colProperty: cols[i].name,
order: 0,//行序號
value: null,
getValue: cols[i].getValue,
getOrder() {
return this.colProperty == 'evalu' ? this.order : null;
}
});
}
for (var i = 0; i < pdata.rows.length; i++) {
pdata.rows[i].category = '管理過程';
pdata.rows[i].flag = 'p';
pdata.rows[i].cellSpans = [];
for (var _w in loca) {
var w = loca[_w];
if (i == 0 || w.value != w.getValue(pdata.rows[i])) {//邊界指針,1.第一條硬性第一個邊界 2.與上一單元格值不同的屬於邊界
w.rowIndex = i;//行索引,若下一單元格值相同則以此索引疊加rowSpan值
w.rowSpan = 1;//rowSpan默認1
w.value = w.getValue(pdata.rows[i]);//單元格值
w.order += 1;//行號+1
} else {
//若本單元格值==上一單元格值則合併列,rowSpan+=1
for (var p in pdata.rows[w.rowIndex].cellSpans) {
var n = pdata.rows[w.rowIndex].cellSpans[p];
if (n.colProperty == w.colProperty) {
n.rowSpan += 1;
}
}
}
}
//設置行號
for (var q in loca) {
var o = loca[q].getOrder();
if (o) {
pdata.rows[i].order = o;
break;
}
}
pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度複製,否則總是指向最後一條數據
}
二、合併方法
spanMethod({ row, column, rowIndex, columnIndex }) {
//遍歷本行合併表
for (var i in row.cellSpans) {
var _r = row.cellSpans[i];
//列屬性匹配
if (_r.colProperty == column.property) {
//若合併表指向本單元格則構建合併參數並返回
if (_r.rowIndex == rowIndex) {
return {
rowspan: _r.rowSpan,
colspan: _r.colSpan
}
} else {//否則隱藏該單元格。這裏必須有,否則單元格會被右移一列
return {
rowspan: 0,
colspan: 0
};
}
}
}
},
毛坯圖:
- 填坑心得
水平太臭調試調了1天多。由於數據抽象,期間序列化輸出各種對象,看見了數據思路明晰多了!後來被
pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度複製,否則總是指向最後一條數據
這個賦值搞坑到,無論如何賦值都指向最後一條,Object.assign用上也不行,只能用這句來替代了。
感謝p墩大力幫助!歡迎加羣 C#開發.NET後花園 137205402 一起學習!