vue表格（原生table）合并以及数据处理
<template>
<div style="min-height: 450px;">
<div style="width: 100%;padding:10px">
<table align="center" width="100%" class="table xunw_table_form" border="0">
<tbody>
<tr>
<th colspan="10" class="zxstyle ly">计算机专业（专业代码：456454）</th>
</tr>
<tr>
<th class="zxstyle">课程类型</th>
<th class="zxstyle">序号</th>
<th class="zxstyle">课程代码</th>
<th class="zxstyle">课程名称</th>
<th class="zxstyle">学分</th>
<th class="zxstyle">教材名称</th>
<th class="zxstyle">主编</th>
<th class="zxstyle">出版社</th>
<th class="zxstyle">版次</th>
<th class="zxstyle">备注</th>
</tr>
<tr v-for="(item, index) in sjList" :key="">
<td align="center" :rowspan="" :class="{hidden: }">{{item.kclx}}</td>
<td>{{index+1}}</td>
<td>{{item.kcdm}}</td>
<td>{{item.kcmc}}</td>
<td>{{item.xf}}</td>
<td>{{item.cjmc}}</td>
<td>{{item.zb}}</td>
<td>{{item.cbs}}</td>
<td>{{item.bc}}</td>
<td>{{item.bz}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name:"essential",
data:function(){
return {
sjList: [
{
kclx: '公共课',
kcdm: '000015',
kcmc: '语文',
xf: '14',
cjmc: '语文',
zb: '张宏',
cbs: '北京大学出版社',
bc: '2025',
bz: '无',
},
{
kclx: '公共课',
kcdm: '000013',
kcmc: '英语',
xf: '52',
cjmc: '英语',
zb: '张近东',
cbs: '北京大学出版社',
bc: '2027',
bz: '无',
},
{
kclx: '公共课',
kcdm: '000019',
kcmc: '数学',
xf: '14',
cjmc: '数学',
zb: '阿斯蒂',
cbs: '北京大学出版社',
bc: '2028',
bz: '无',
},
{
kclx: '考核课',
kcdm: '000056',
kcmc: '物理',
xf: '11',
cjmc: '物理',
zb: '萨蒂',
cbs: '北京大学出版社',
bc: '2029',
bz: '无',
},
{
kclx: '考核课',
kcdm: '000045',
kcmc: '化学',
xf: '14',
cjmc: '化学',
zb: '名点',
cbs: '北京大学出版社',
bc: '2027',
bz: '无',
},
{
kclx: '公共课',
kcdm: '000085',
kcmc: '生物',
xf: '36',
cjmc: '生物',
zb: '张炯',
cbs: '北京大学出版社',
bc: '2028',
bz: '无',
}
]
}
},
created:function(){
this.checkSameData(this.sjList)
this.combineCell()
},
methods: {
// 数据处理相同的放在一起
checkSameData(sjList){
let cache = {}; //存储的是键是kclx 的值，值是kclx 在indeces中数组的下标
let indices = []; //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同kclx的下标
sjList.map((item,index)=>{
let kclx = item.kclx;
let _index = cache[kclx];
if(_index!==undefined){
indices[_index].push(index)
}else{
cache[kclx] = indices.length
indices.push([index])
}
})
let result = [];
indices.map((item)=>{
item.map((index)=>{
result.push(sjList[index])
})
})
this.sjList = result
},
// 合并
combineCell() {
let list =this.sjList;
for (let field in list[0]) {
var k = 0;
while (k < list.length) {
list[k][field + 'span'] = 1;
list[k][field + 'dis'] = false;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][field] == list[i][field] && list[k][field] != '') {
list[k][field + 'span']++;
list[k][field + 'dis'] = false;
list[i][field + 'span'] = 1;
list[i][field + 'dis'] = true;
} else {
break;
}
}
k = i;
}
}
return list;
}
}
}
</script>
<style scoped>
.zxstyle{
text-align: left;
font-weight: bold;
}
.ly {
text-align: center;
font-size: 25px;
color: #00a7d0;
}
.table>tbody>tr>td {
vertical-align: middle;
}
</style>