Element UI version
2.13.2
OS/Browsers version
chrome
Vue version
2.6.11
Reproduction Link
https://jsfiddle.net/mmx38qxw/
Steps to reproduce
抱歉，由于重现链接中无法使用 codesandbox 的链接，真正的重现链接在这里:
https://codesandbox.io/s/unruffled-cdn-rvmb7
预览页面:
重现 参现链接中 index.html 的写法。
vue 使用 cdn 方式引入， element-ui 使用 webpack 方式编译。
el-table 中的 无法正常显示, 显示的 html 是这样的:
<div id="app">
table:
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;"><div class="hidden-columns"><div></div> <div></div> <div></div></div><div class="el-table__header-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1369px;"><colgroup></colgroup><thead class=""><tr class=""></tr></thead></table></div><div class="el-table__body-wrapper is-scrolling-none"><table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 1369px;"><colgroup></colgroup><tbody><tr class="el-table__row"></tr><tr class="el-table__row"></tr><tr class="el-table__row"></tr><tr class="el-table__row"></tr><!----></tbody></table><!----><!----></div><!----><!----><!----><!----><div class="el-table__column-resize-proxy" style="display: none;">
</div>
</div>
</div>这个情况常见于未全部使用 webpack 方式开发前端的项目，如 rails 的项目，或者以前维护中的项目。
这些项目在向纯前端的过渡中，会同时将 webpack 编译后的代码引入在原有 html 页面，与原来的旧代码共存。然后就出现这个情况， el-table 无法正常显示的。
同样的代码，在 vue element-ui 均使用 cdn 引入的方式，或者均使用 webpack 的方式都没有问题。
另一个相关的 issue 是这个:
#17093
What is Expected?
el-table 能正常显示
What is actually happening?
el-table 不能正常显示
4条答案
按热度按时间h4cxqtbf1#
Translation of this issue:
Element UI version
2.13.2
OS/Browsers version
chrome
Vue version
2.6.11
Reproduction Link
https://jsfiddle.net/mmx38qxw/
Steps to reproduce
Sorry, because the codesandbox link cannot be used in the replay link, the real replay link is here:
https://codesandbox.io/s/unruffled-cdn-rvmb7
Preview page:
https://rvmb7.csb.app/
Recurring reference link index.html How to write it.
Vue is introduced by CDN, and element UI is compiled by webpack.
The in El table cannot be displayed normally. The displayed html is as follows:
table:
|
|
|
|
|
|
This situation is common in projects that do not fully use webpack to develop the front-end, such as rails projects, or projects under previous maintenance.
In the transition to pure front-end, these projects will introduce the compiled webpack code into the original HTML page and coexist with the original old code. Then this happens. The El table cannot display normally.
For the same code, there is no problem in using CDN or webpack in Vue element UI.
Another related issue is this:
#17093
What is Expected?
El table can display normally
What is actually happening?
El table cannot display normally
of1yzvn42#
同问，vue和element-ui均使用cdn方式引入，出现el-table组件无法显示的情况，项目中所有使用el-table的地方都显示不了了。
vue 版本 2.6.12，element-ui版本：2.13.2
dohp0rv53#
15846 (comment)
This solved it for me. Looks like it's a problem in the dist file for Vue in later versions.
biswetbf4#
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.