element 动态合并表格---进阶版
错误展示
正确展示
如果使用上次博客写的element 动态合并表格那么会出现上述图片情况,所以对其进行完善实现下图(正确展示)情况
处理函数
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data;
}
merge.forEach((m) => {
const mList = {};
let spliceLocation = merge.indexOf(m)
data = data.map((v, index) => {
const rowVal = v[m];
if (mList[rowVal] && mList[rowVal].newIndex === index) {
// flag为true的时候代表当前值的前者与上一个值相等
/*
只有当当前merge之前的所有merge的值的当前index等于index-1 才允许当前merge合并
*/
let flag = false;
let mergeSolve = merge.slice(0,spliceLocation);
mergeSolve.slice(0,spliceLocation).forEach(mergeItem=>{
if(data[index][mergeItem] == data[index-1][mergeItem]){
flag = true
}
})
if( m == merge[0] ){
flag = true;
}
if(flag){
mList[rowVal]["num"]++;
mList[rowVal]["newIndex"]++;
data[mList[rowVal]["index"]][m + "-span"].rowspan++;
v[m + "-span"] = {
rowspan: 0,
colspan: 0,
};
}else{
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
return v;
});
});
return data;
},
数据处理
let dataSolve = this.mergeTableRow(res.data.data, ["feature", "state"]);
elementUI表格配置项
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["property"] + "-span";
if (row[span]) {
return row[span];
}
},
实际案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="app">
<el-table style="width:840px" :data="historyData" :span-method="objectSpanMethod" :border="true">
<el-table-column prop="feature" label="Feature" align="center" width="140">
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="140">
</el-table-column>
<el-table-column prop="type" label="任务类型" align="center" width="140">
</el-table-column>
<el-table-column prop="owner" label="负责人" align="center" width="140">
</el-table-column>
</el-table>
</div>
<body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
historyData: [],
}
},
mounted() {
let dataArr = [
{
"feature": "Change",
"state": "已完成",
"type": "机翼",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Change",
"state": "已完成",
"type": "尾部",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Perfor",
"state": "已完成",
"type": "头部",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Power",
"state": "未完成",
"type": "翅膀",
"owner": "小王",
"week10Plan": "0.0",
"week10Book": "0.0",
"week11Plan": "1.0",
"week11Book": "0.0",
"week12Plan": "5.0",
"week12Book": "5.0"
},
{
"feature": "Touch",
"state": "已完成",
"type": "机舱仪器",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
}
]
let dataSolve = this.mergeTableRow(dataArr, ["feature", "state"]);
this.historyData = dataSolve;
},
methods: {
// 合并表格
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data;
}
merge.forEach((m) => {
const mList = {};
let spliceLocation = merge.indexOf(m)
data = data.map((v, index) => {
const rowVal = v[m];
if (mList[rowVal] && mList[rowVal].newIndex === index) {
// flag为true的时候代表当前值的前者与上一个值相等
/*
只有当当前merge之前的所有merge的值的当前index等于index-1 才允许当前merge合并
*/
let flag = false;
let mergeSolve = merge.slice(0, spliceLocation);
mergeSolve.slice(0, spliceLocation).forEach(mergeItem => {
if (data[index][mergeItem] == data[index - 1][mergeItem]) {
flag = true
}
})
if (m == merge[0]) {
flag = true;
}
if (flag) {
mList[rowVal]["num"]++;
mList[rowVal]["newIndex"]++;
data[mList[rowVal]["index"]][m + "-span"].rowspan++;
v[m + "-span"] = {
rowspan: 0,
colspan: 0,
};
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
return v;
});
});
return data;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["property"] + "-span";
if (row[span]) {
return row[span];
}
},
}
})
</script>
</body>
</html>
