Translation of this issue:

Element Plus version

1.1.0-beta.9

OS/Browsers version

windows 7/ chrome 66 and chrome 69

Vue version

3.2.10

Reproduction Link

https://codepen.io/iamkun/pen/YzWMaVa

Steps to reproduce

First of all, please note, the codepen url below is fake because the bug cannot be reproduced at Codepen.

cdn:

This bug is repeated in two places:

The first is the official website, https://element-plus.gitee.io/#/zh -CN/component/table, In Chrome 66/69, I can only see the address column. Where are the other two columns?

<tbody><tr class=\"el-table__row\"><td class=\"el-table_1_column_3   el-table__cell\" rowspan=\"1\" colspan=\"1\"><div class=\"cell\"><!----> Lane 1518, Jinshajiang Road, Putuo District, Shanghai < / div > < / td > < / TR > < tr class = \"El table_row\" > < TD class = \"El table_1_column_3 El table_cell\" rowspan = \"1\" colSpan = \"1\" > < div class = \"cell\" > <! --- > Lane 1517, Jinshajiang Road, Putuo District, Shanghai < / div > < / td > < / TR > < tr class = \"El table_row\" > < TD class = \"El table_1_column_3 El table_cell\" rowspan = \"1\" colSpan = \"1\" > < div class = \"cell\" > <! --- > Lane 1519, Jinshajiang Road, Putuo District, Shanghai < / div > < / td > < / TR > < tr class = \"El table_row\" > < TD class = \"El table_1_column_3 El table_cell\" rowspan = \"1\" colSpan = \"1\" > < div class = \"cell\" > <! --- > Lane 1516, Jinshajiang Road, Putuo District, Shanghai < / div > < / td > < / TR > < / tbody >

! image
The second is in the development mode, the leftmost column cannot be displayed. Where's the first column? Where's the 'el-table_ 1_ column_ 1'?

<colgroup><col name=\"el-table_1_column_2\" width=\"394\"><col name=\"el-table_1_column_3\" width=\"393\"><col name=\"el-table_1_column_4\" width=\"393\"><!----></ colgroup>

What is Expected?

I want to see all the columns.

What is actually happening?

Some columns are missing, at least in chrome 66 / 69.

Hello @microkof. Please provide an online reproduction demo by clicking this link or a minimal GitHub repository.

你好 @microkof, 请提供一个可复现问题的链接以便于我们帮你排查问题。可以通过点击 此处 创建或者提供一个最小化的 GitHub 仓库。

Please provider a correct reproduction link

Please provider a correct reproduction link

Yes, OK.

Hi, I prepared a code, but I didn't upload the code to GitHub, because I need to study what 'github personal access token' is, so I uploaded the code to gitee.com. I believe this is also possible.

https://gitee.com/microkof/table-column-missing-after-f5-in-dev-mode

Reproduction method:

1. You may or may not need to install Chrome 69. Maybe you'd better take the next step first.
2. Install the project.
3. Please expand the left navigation menu and click 'test page 1' button. You will see a three column table, and then
   press F5 to refresh the page. You will find that one column is missing from the table. Click the 'test page 2'
   button, similarly. The table has 4 columns, and only 3 columns remain after F5 refresh.
4. Remember, when you first enter the page, the table is normal, and the columns will not be lost until you refresh the page.

Please provider a correct reproduction link

Also, you can observe this effect from the official website

https://element-plus.gitee.io/#/zh-CN/component/table

1. Chrome 69 or 6x version must be installed. This is necessary.
2. Visit the url, the table is normal when it is opened for the first time. Then F5 refresh. You will find that there is only one column left in the first table.

In addition, in my last reply, I said that the Chrome 6x version may or may not be required. Now I think it is necessary.

Sorry, I stil can't reproduce this problem.
Can someone help me reproduce it? @element-plus/backers

Sorry, I stil can't reproduce this problem.
Can someone help me reproduce it? @element-plus/backers

First, Download Chrome 66, from :

https://dl.google.com/release2/chrome/Qystcf3MOD8_66.0.3359.117/66.0.3359.117_chrome_installer.exe

Be careful, it will silently upgrade.

And then, my OS is Window 7, you'd better do the same, if you can.

Sorry, I stil can't reproduce this problem.
Can someone help me reproduce it? @element-plus/backers

I think I know the reason for this bug.

Open file:

element-plus/es/components/table/index.js

Search statement:

states._ columns.value = newColumns;

The correct way to write it should be:

states.columns.value = newColumns;

_columns is a temporary variable used by the previous logical code, and its data is incomplete. And newColumns is the final data, and its data is complete.

Then please search for:

hColgroup(this.store.states.columns.value),

Obviously, the variable used for rendering data is columns , not _columns 。

At least I think this is the reason at present. If you think it's not, I'll continue to find the real reason for the error.

I'm sorry, the above solution solves the TableBody part only, but does not solve the TableHeader part, because it involves another variable originColumns . I hope the official will give a thorough solution.