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="item.id">
                    <td align="center" :rowspan="item.kclxspan" :class="{hidden: item.kclxdis}">{{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>