VUE implementation of data forms merge column ROWSPAN effect

There will be many demand, merge columns, such as each courses to display a famous student.

Vue实现数据表格合并列rowspan效果

HTML implementation

Using the HTML implementation is relatively simple, utilizing the ROWSPAN attribute of the Table tag, the code is as follows:

Name
  Curriculum  Course name  Zhang 3  3  100  Data structure  In the actual engineering, the table data is generally from the rear end, and the students and courses are one-to-many after sending to the front end in JSON format. Relationship, JSON format data structure is as follows:  [{Name: 'Zhang 3', coursees: [{name: 'language ", score:' 100 '}, { Name: 'Mathematics', Score: '90'}, {Name: 'English', Score: '80'}]}]  VUEImplementation 
We compare the table structure and JSON data structure, and analyze the following:
1. In fact, each course corresponds to the table
2. If it is the first The second column (student name, student courses) should set the number of courses owned by the student

3. If it is the second column of the first column, each student only needs to output 1 time. Columns, because you need to be displayed by students. After the analysis is 1-3, the code implementation is simple:

TH { Border: 1px solid black; width: 100px;} td {border: 1px solid black;}
   
Name
courses

{{item.name}}


{{m.courses.Length}}

{m.name}}

{{m.score}}
      VAR VM = New Vue ({EL: "#app", data: {students: [{name: 'Zhang 3 ", Coursees: [{name:'Wen ', score:' 100 '}, {name:' Mathematics', Score: '90'}, {name: 'English', score: '80'}]}, {name: 'Lee Fourth', coursees: [{Name: 'language', score: '100'}, {name: 'Mathematics', Score: '90'}]}]}});   
The above is all the contents of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment