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

Question

我正在尝试创建一个表格，将用户通过买票回答的所有答案放在正确的问题下，如果他们没有回答，则显示破折号。

问题是，如果用户购买的票多于一张，那么答案就会一团糟。

示例:

那么，为此，该号码应位于“手机号码”下方？在“Free 2”和“Male”的同一行中，“Aadil”和“20”应该放在“Gender?”、“Name?”下面和“年龄？”与免费在同一行。

这是我的 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> , 之后使用 <div>用网格和 CSS 组织内部 <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>