[Vuejs]-Using vuejs, when colspan data increments I want to remove a <td></td>

by

0👍

✅

I would do what you suggest. Just add v-if conditions according to the number of td you are away from the one with the colspan defined. I did the first on as an example:

new Vue({
                el: '#growth',
                data: {
                    column1Span: '3',
                    column2Span: '3',
                    column3Span: '1',
                    column4Span: '3',
                    column5Span: '1',
                    column6Span: '1'

                },
                methods:{
                    
                }

            })
<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<div id="growth">
  <table>
        <tr class="body_top">
            <td>1</td>
            <td></td>
            <td>2</td>
            <td></td>
            <td class="#" colspan="0"></td>
            <td>3</td>
            <td colspan="{{column1Span}}">4</td>
            <td v-if="column1Span < 3">5</td>
            <td></td>
            <td>5</td>
            <td>6</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>

        <tr class="body_top">
            <td>7</td>
            <td></td>
            <td>8</td>
            <td></td>
            <td class="#" colspan="0"></td>
            <td>9</td>
            <td colspan="{{column2Span}}">10</td>
            <td></td>
            <td>11</td>
            <td>12</td>
            <td v-if="column2Span"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
  </table>
</div>

Leave a comment