<template>
<div class="HeBingTable">
<el-table
:data="tableData"
show-summary
:span-method="arraySpanMethod"
style="width: 100%">
<el-table-column
v-for="(item,index) in dataHeader"
:prop="item.children===undefined?item.prop:''"
:label="item.label"
:sortable="item.sortable?true:false"
:key="index">
<template v-if="item.children">
<el-table-column v-for="(child,indexChild) in item.children"
:prop="child.prop"
:label="child.label"
:sortable="item.child?true:false"
:key="indexChild">
</el-table-column>
</template>
</el-table-column>
</el-table>
</div>
</template>
JS:
<script>
export default {
name:"HeBingTable",
data(){
return{
tableData:[
{
cangku:"百应总库",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE021521",
changpinxinghao:"DP01",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE021522",
changpinxinghao:"DP01",
chanpindanwei:"台1",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE021523",
changpinxinghao:"DP012",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE02152",
changpinxinghao:"DP01",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库",
chanpinmingcheng:"总计",
chanpinbianhao:"",
changpinxinghao:"",
chanpindanwei:"",
shuliang:"10",
jine:"10",
shuliang1:"20",
jine2:"11",
},
{
cangku:"百应总库1",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE02152",
changpinxinghao:"DP01",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库1",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE02152",
changpinxinghao:"DP012",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
},
{
cangku:"百应总库1",
chanpinmingcheng:"华强北服务器",
chanpinbianhao:"NFDE02152",
changpinxinghao:"DP01",
chanpindanwei:"台",
shuliang:"1",
jine:"1",
shuliang1:"2",
jine2:"10",
}
],
dataHeader:[
{
prop:"cangku",
label:"仓库"
},
{
prop:"chanpinmingcheng",
label:"产品名称"
},
{
prop:"chanpinbianhao",
label:"产品编号"
},
{
prop:"changpinxinghao",
label:"产品型号"
},
{
prop:"chanpindanwei",
label:"产品单位"
},
{
label:"产品型号",
children:[
{
prop:"shuliang",
label:"(数量)",
sortable:true
},
{
prop:"jine",
label:"(金额)",
sortable:true
}
]
},
{
label:"产品出场",
children:[
{
prop:"shuliang1",
label:"(数量)"
},
{
prop:"jine2",
label:"(金额)"
}
]
}
],
indexssss:null
}
},
methods:{
arraySpanMethod({
row, column, rowIndex, columnIndex}){
const that = this;
let num = 0;
var key = column.property;
var val = that.tableData[rowIndex][key];
var cangku = that.tableData[rowIndex]['cangku'];
//合并行
for (let i in that.tableData) {
//遍历items
for (let j in that.tableData[i]) {
//再遍历item的key
if (j == 'cangku' || j=='chanpinmingcheng'||j=='chanpinbianhao' || j=='changpinxinghao'|| j=='chanpindanwei') {
//如果j等于这三者其中一个
if (key === j && val === that.tableData[i][j]) {
//再判断j是否等于key,并且val等于items里面的items[i][j]的值
if (that.tableData[i][j] == '小计:' || that.tableData[i][j] == '总计') {
//如果等于则判断是否未小计、合计
console.log(rowIndex);
console.log(columnIndex)
that.indexssss = rowIndex;
return;//如果是,则不用合并列
}
//合并列,用于总计
if(rowIndex==that.indexssss && that.tableData[i][j]==""){
let columnd = that.getNumber(rowIndex,columnIndex,j);//得到为空的格子
if(columnd>0){
return{
rowspan:1,
colspan: columnd
}
}
return{
rowspan:0,
colspan:0
};
}
//合并行
if(rowIndex !=0){
//先计算是否和上一个值相等,如果相等,则为0,如果不相等,证明是第一个。或者是重新的第一个 :类似于 :0,0,1,0,0
if(that.tableData[rowIndex][key]==that.tableData[rowIndex-1][key] && that.tableData[rowIndex]['cangku']==that.tableData[rowIndex-1]['cangku']){
return{
rowspan:0,
colspan:0
}
}else{
var numss = that.getNumForValue(key,val,cangku,rowIndex);
return{
rowspan:numss,
colspan:1
}
}
}else{
if(that.tableData[rowIndex][key]==that.tableData[rowIndex+1][key] && that.tableData[rowIndex]['cangku']==that.tableData[rowIndex+1]['cangku']){
var numss = that.getNumForValue(key,val,cangku,rowIndex);
return{
rowspan:numss,
colspan:1
}
}else{
return{
rowspan:1,
colspan:1
}
}
}
// var index = that.tableData.findIndex(item=>{
// return item[key] == val && item['cangku'] === cangku;
// })
// if(rowIndex==index){
// //证明是第一个,算出需要合并多少行
// var numss = that.getNumForValue(key,val,cangku,rowIndex);
// return{
// rowspan:numss,
// colspan:1
// }
// }else{
// //其他的隐藏
// return{
// rowspan:0,
// colspan:0
// }
// }
}
}
}
}
},
//得到重复值的数量
getNumForValue(key,val,xuhao,rowIndex){
const that = this;
let num = 1;
// for (let i in that.tableData) { //遍历items
// for (let j in that.tableData[i]) { //再遍历item的key
// if (j == 'cangku' || j=='chanpinmingcheng' ||j=='chanpinbianhao' || j=='changpinxinghao'|| j=='chanpindanwei') { //如果j等于这三者其中一个
// if (key === j && val === that.tableData[i][j] && xuhao===that.tableData[i]['cangku']) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
// if (that.tableData[i][j] == '小计:' || that.tableData[i][j] == '合计:') { //如果等于则判断是否未小计、合计
// console.log(val+":"+num)
// return 0;//如果是,则不用合并列
// }
// num++;//如果不是。则合并,合并数加1
// }
// }
// }
// }
// debugger
for(let i=rowIndex;i<that.tableData.length;i++){
if(i != that.tableData.length-1){
if(that.tableData[i][key]==that.tableData[i+1][key]){
num++;
}else{
break;
}
}else{
//最后一行
if(that.tableData[i][key]==val){
num++;
}else{
break;
}
}
}
return num;
},
//得到下一个值是否为空,如果是,则返回
getNumber(rowIndex,columnIndex,j){
console.log(rowIndex);
console.log(columnIndex)
let that = this;
let preIndex = ""; //字段的前一个
let num=0;
//找到该字段上方的字段是否为空,如果为空,则继续为0,如果不为空。则判断下方是否为空,为空的有多少个。
for(let i in that.tableData[rowIndex]){
if(i==j){
break;
}
preIndex = i;
}
if(that.tableData[rowIndex][preIndex] == ""){
return num;
}
//找到有下方有多少个
let isBegin = false;
let uu = false;
for(let k in that.tableData[rowIndex]){
if(uu==false){
if(k == j){
isBegin =true;
uu=true;
}
}
if(isBegin){
if(that.tableData[rowIndex][k]!=""){
break;
}
++num;
}
}
return num;
}
},
mounted(){
}
}
</script>
style:
<style lang="scss" scoped>
.HeBingTable{
}
</style>