table

合并表格

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
        <div class="no-border-table el-table el-table--border" style="width: 100%">
            <table style="width: 100%" cellspacing="0" cellpadding="0" border="0">
                <thead>
                <tr>
                    <th v-for="th in table.columns" :key="th.key"><div class="cell">{{th.label}}</div></th>
                </tr>
                </thead>
                <tbody v-html="getTbody"></tbody>
            </table>
        </div>
</template>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

JavaScript

new Vue({
        el:"#app",
        computed:{
            getTbody(){
                let column = this.table.columns;
                const getTr = (obj,index)=>{
                    index ++;
                    if (obj.children) {
                        let str = '';
                        let line = 0;
                        obj.children.forEach(obj => {
                            let r = this.getTd(obj);
                            str += (++line > 0 ? '' : '<tr>') + `<td${r>1?' rowspan="'+r+'"':''}><div class="cell">${index}:${obj[column[index].key]}</div></td>` + getTr(obj, index);
                        });
                        return str;
                    } else {
                        return `</tr>`;
                    }
                };
                return getTr({children:this.table.data},-1);
            }
        },
        methods:{

            getTd(obj){
                if(obj.children){
                    let i = 0;
                    obj.children.forEach(obj => {
                        i += this.getTd(obj);
                    });
                    return i;
                }else{
                    return 1;
                }
            }
        },
        data() {
            return {
                table:{
                    columns:[
                        {key:'college',label:'学校'},
                        {key:'grade',label:'年级'},
                        {key:'team',label:'班级'},
                        {key:'name',label:'姓名'}
                    ],
                    data:[
                        {
                            college:'一个学院',
                            children:[{
                                grade:"一个年级",
                                children:[{
                                    team:"一个班",
                                    children:[
                                        {id:1,name:"一个学生"}
                                    ]
                                }]
             ...