[Bug Report] The table format is incorrect when the end tag is not used

[ghost]

Element Plus version

1.2.0-beta.2

OS/Browsers version

95.0.4638.54

Vue version

3.2.21

Reproduction Link

https://codepen.io/HMWCS/pen/oNeqrxr

Steps to reproduce

1. Open the reproduction link
2. The table turned into a wrong format with 7 rows and 1 column
3. Add end tag to each HTML element (e.g. change "" to "")
4. The table turned into the correct format which has 5 rows and 3 columns

What is Expected?

The table should have 5 rows and 3 columns as follows:

---

Date Name Address

2016-05-03 Tom No. 189, Grove St, Los Angeles

2016-05-02 Tom No. 189, Grove St, Los Angeles

2016-05-04 Tom No. 189, Grove St, Los Angeles

2016-05-01 Tom No. 189, Grove St, Los Angeles

What is actually happening?

The table wrongly turned into a table with 7 rows and 1 column table as follows:

---

Date

Name

Address

No. 189, Grove St, Los Angeles

No. 189, Grove St, Los Angeles

No. 189, Grove St, Los Angeles

No. 189, Grove St, Los Angeles

[ghost]

Step 2 image:

Step 3: Add end tag to each HTML element (e.g. change <el-table-column /> to <el-table-column></el-table-column>

[msidolphin]

Can you reproduce this problem in platforms other than codepen, i think it's cause by codepen.

[ghost]

Can you reproduce this problem in platforms other than codepen, i think it's cause by codepen.

Hello, thank you for your reply, I have reproduced this problem on another platform which is JSFiddle, the link is https://jsfiddle.net/1zt3kfbq/

In addition, this problem occurs on my own computer as well, so I think this is probably a bug instead of some problems caused by CodePen. And yeah, I think this bug is caused by using the self-closing tag. As I mentioned in my reproduction steps, when I add the end tag, the table can display correctly.

[msidolphin]

@element-plus/backers Is anyone can reproduce this issue?

[msidolphin]

Can you reproduce this problem in platforms other than codepen, i think it's cause by codepen.

Hello, thank you for your reply, I have reproduced this problem on another platform which is JSFiddle, the link is https://jsfiddle.net/1zt3kfbq/

In addition, this problem occurs on my own computer as well, so I think this is probably a bug instead of some problems caused by CodePen. And yeah, I think this bug is caused by using the self-closing tag. As I mentioned in my reproduction steps, when I add the end tag, the table can display correctly.

Can you provide details of your environment?

[ghost]

Can you reproduce this problem in platforms other than codepen, i think it's cause by codepen.

Hello, thank you for your reply, I have reproduced this problem on another platform which is JSFiddle, the link is https://jsfiddle.net/1zt3kfbq/
In addition, this problem occurs on my own computer as well, so I think this is probably a bug instead of some problems caused by CodePen. And yeah, I think this bug is caused by using the self-closing tag. As I mentioned in my reproduction steps, when I add the end tag, the table can display correctly.

Can you provide details of your environment?

Hello, my environment is Chrome Version 95.0.4638.54 - Windows 10 Version 10.0.19042 Build 19042, Element Plus version 1.2.0-beta.2, and Vue version 3.2.21, thanks

[msidolphin]

Can you reproduce this problem in platforms other than codepen, i think it's cause by codepen.

Hello, thank you for your reply, I have reproduced this problem on another platform which is JSFiddle, the link is https://jsfiddle.net/1zt3kfbq/
In addition, this problem occurs on my own computer as well, so I think this is probably a bug instead of some problems caused by CodePen. And yeah, I think this bug is caused by using the self-closing tag. As I mentioned in my reproduction steps, when I add the end tag, the table can display correctly.

Can you provide details of your environment?

Hello, my environment is Chrome Version 95.0.4638.54 - Windows 10 Version 10.0.19042 Build 19042, Element Plus version 1.2.0-beta.2, and Vue version 3.2.21, thanks

This seems to be an issue with vue (of course we need to reconfirm), when I try to using self-close with a custom component, it triggers a similar problem (only one custom component was rendered)

This issue causes the table-column to be rendered incorrectly as a subColumn

const Custom = {
  name: 'custom',
  render () {
    return Vue.h('div', 'custom')
  }
}

[msidolphin]

This issue is mentioned in the documentation

https://vuejs.org/v2/style-guide/index.html#Self-closing-components-strongly-recommended