背景

现实中会有很多需求，比如合并栏目，比如显示某名校生各门课程的分数。

Html实现

使用html相对简单，可以通过使用table标记的rowspan属性来实现。代码如下：

表d第一个名称/第一个课程编号/第一个课程名称/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个分数/第一个

实际工程中，表数据一般来自后端。以json格式发送到前端后，学生和课程是一对多的关系。json格式的数据结构如下：

[{姓名： '张三'，课程：[{姓名： '中文'，分数： '100' }，{姓名： '数学'，分数： '90' }，{姓名： '英文'，分数333333。

将表结构与json数据结构进行比较，我们得出以下结论：

1.事实上，每门课程都对应于表格中的一行。2.如果是第一列和第二列(学生姓名和课程数量)，则其rowspan值应设置为学生拥有的课程数量。3.如果是第一列和第二列，每个学生只需要输出这个列一次，因为需要根据学生合并列后显示。

分析完第1-3篇文章后，代码实现很简单：

htmlhead style th { border: 1px纯黑；宽度： 100 px；} td { border: 1px纯黑；}/style/headbody div id=' app '在学生的tr v-for=' (m，I)项中列出ad第几个名称/第几个课程编号/第几个课程名称/第几个分数/第几个ad tbody模板v-for='(项，索引)。课程！-第1栏，每个学生只需要展示一次-TD v-if=' I==0 ' : row span=' item。courses . length“{ item。名称}}/TD！-第2栏的每个学生只需要展示一次-TD v-if=' I==0 ' : row span=' item。courses . length“{ item。courses . length } }/TD TD TD { { m . name } }/TD TD { { m . score } }/。tbody /table /div脚本src=' http :https://cdn . bootscs.com/Vue/2 . 6 . 10/Vue . js '/脚本脚本var vm=new Vue({ el: '#app '，data : { Students :[{ Name : ' Zhang San '，courses :[{ Name : ' Chinese '，score 3: ' 100 ' }，{ Name : '/脚本/正文/html效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。