Vue component usage details label rendering problem

We create a three-row table in the page:
Insert picture description here
Insert picture description here
if we want to componentize, each row is a component, try writing
Insert picture description here
like this: the effect seems to be no problem, but we clicked on the structure and found that there was an error, the rendered <tr>and <td>tag has not been placed on tbodythe label inside, but and tablesame level of:
Insert picture description here
this is because the html5 specification inside, the provisions of the following table label inside the tbody tr only place, then came alive again inside tr td, but we put the rowlabel:
Insert picture description here

How to deal with it:
Very simple, <tbody>the following can only put <tr>, we'll <row>have changed <tr>, but the fact is that we want to render <row>, so we isattribute to specify it:
Insert picture description here
Here is="row"the meaning is that here we can not write <row>, can write <tr>, but we write <tr>Actually represent <row>. The effect is as follows:
Insert picture description here

In the same way, the following tags are also what we should pay attention to:
<ul>or the <ol>following must be written. <li>
Insert picture description hereInsert picture description here
<select>The following must be written<option>
Insert picture description hereInsert picture description here

Guess you like

Origin blog.csdn.net/dyw3390199/article/details/112392748