格式化表格以在正确的列和行中显示数据

Question

我正在尝试创建一个表格，将通过购买机票而回答的所有答案置于正确的问题下，如果未回答，则显示破折号。

问题在于，如果用户购买的门票多于门票，答案就会一团糟。

示例：

那么，这个数字应该放在“移动电话号码”下？在与“免费2”和“男性”相同的行中，“ Aadil”和“ 20”应放在“性别？”，“姓名？”下和“年龄？”与免费在同一行。

这是我的HTML：

<template>
    <fragment>
        <tr>
            <td :rowspan="countArray + 1">
                <img :src="user.profile_image">
            </td>

            <td :rowspan="countArray + 1">
                {{user.first_name + " " + user.last_name}}
            </td>

            <td :rowspan="countArray + 1">
                <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                    <td>
                        {{nameTick}}
                    </td>
                </div>
            </td>
        </tr>

        <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
            <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                {{ans.answer}}
            </td>
        </tr>
    </fragment>
</template>

这是我的JS：

beforeMount: function() {
        this.$axios.$get(`/user/${this.userId}`).then(response => {
            this.user = response
        });

        for (let i = 0; i < this.ticketName.tickets.length; i++) {
            this.tickets_name = this.ticketName.tickets[i].ticket_name;
            this.countArray = this.ticketName.tickets[i].count;
            this.name.push(this.tickets_name);
        };
    },

    watch: {
        tickets: {
            handler: function(val) {
                for (let x = 0; x < val.length; x++) {
                    this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response => {

                        for (let i = 0; i < response.questions.length; i++) {
                            this.userAnswered = response.questions[i];

                            this.answered.push(this.userAnswered.answer);
                        }
                        console.log(response)
                        this.allQuestions = this.ticketAns.push(response);
                    })
                }
                // this.userAnswers.push(this.ticketAns);
                this.userAnswers.push(this.answered);
            }
        }
    }

如果有人可以帮助，将不胜感激。

Answer 1

删除<td>内的<td>，然后使用带有网格和CSS的<div>在<div>内部进行整理。

<template>
        <fragment>
            <tr>
                <td :rowspan="countArray + 1">
                    <img :src="user.profile_image">
                </td>

                <td :rowspan="countArray + 1">
                    {{user.first_name + " " + user.last_name}}
                </td>

                <td :rowspan="countArray + 1">
                    <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                        <div class="ui grid">
                            {{nameTick}}
                        </div>
                    </div>
                </td>
            </tr>

            <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
                <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                    {{ans.answer}}
                </td>
            </tr>
        </fragment>
    </template>