rowspan table

by willystyle

HTML

<div id="app"></div>

<script type="text/x-template" id="grid-template">
    <div id="wrapper">           
        <table class="my-table">
            <tbody>
                <tr v-for="(row, i) in tableData" :key="i">                        
                    <td v-for="(col, j) in row" :key="j" :rowspan="tableRowSpans[i][j]" v-if="tableRowSpans[i][j]">
                        {{tableData[i][j]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</script>

CSS

.my-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.my-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

JavaScript

var vueInstance = new Vue({
    el: '#app',
    template: '#grid-template',
    data: {       
        tableData: [
            ["", "1", "2", "3", "4"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"],
            ["test", "test", "test" , "test", "test"]            
           
        ],
        tableRowSpans: [
            [1, 1, 1, 1, 1],
            [7, 3, 1, 1, 3],
            [0, 0, 1, 1, 0],
            [0, 0, 1, 1, 0],
            [0, 4, 1, 1, 4],
            [0, 0, 1, 1, 0],
            [0, 0, 1, 1, 0],
            [0, 0, 1, 1, 0]           
        ]        
    },
    mounted: function () {},
    computed: {},
    methods: {}
});