Element: [Bug Report] el-table not working with any data

[keyug]

Element UI version

2.11.1

OS/Browsers version

Mac/Chrome

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/mmx38qxw/

Steps to reproduce

I have these in package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll"
},
"devDependencies": {
"babel-loader": "^8.0.6",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"css-loader": "^3.2.0",
"laravel-mix": "^4.1.2",
"lodash": "^4.17.11",
"prettier": "^1.18.2",
"resolve-url-loader": "3.1.0",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"animate.css": "^3.7.2",
"axios": "^0.19.0",
"dayjs": "^1.8.11",
"element-ui": "^2.11.1",
"file-loader": "^4.2.0",
"font-awesome": "^4.7.0",
"jquery": "^3.4.0",
"node-sass": "^4.7.2",
"nprogress": "^0.2.0",
"sass-loader": "^7.2.0",
"simplebar": "^4.1.0",
"tiptap": "^1.23.0",
"vue": "^2.6.10",
"vue-highlightjs": "^1.3.3",
"vue-loader": "^15.7.1",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.2",
"vuex": "^3.1.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
}
}

What is Expected?

el-table doesn't work in vue-devtools it shows element but in html it doesn't show table with data, on previous versions it was working no idea when it broke and why it broke if anybody can help me debug this issue I would be greatful. it has been broken since months waited for release to fix this but nothing so far.

What is actually happening?

with any data doesn't show any data

[keyug]

Downgrading NPM, Node even browser change doesn't help. Any idea how to debug this issue.

[keyug]

All Table layout in my application is broken and I am unable to find a way to fix this issue. is there some kind of dependency npm package that could have caused this ?
as restoring older version of packages is also not helping.

[keyug]

Generated HTML for the table

<div class="el-table el-table--fit el-table--striped el-table--enable-row-hover el-table--enable-row-transition el-table--mini" style="width: 100%;"><div class="hidden-columns"><div></div> <div></div> <div></div> <div></div> <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: 1388px;"><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: 1388px;"><colgroup></colgroup><tbody><!----></tbody></table><!----><!----></div><!----><!----><!----><!----><div class="el-table__column-resize-proxy" style="display: none;"></div></div>

[wacky6]

Please fix the jsfiddle link. It's empty.

[keyug]

https://codesandbox.io/s/lingering-fog-qhcil
This works here
but on my machine it doesn't work I have no idea why it is not working how to debug the cause of this issue

[miharbi]

@kundaneyug are you using Laravel Nova? I have the same problem, all tables in my project just hide since I did 'npm update', but if I cut and paste table and data to another environment it works

[island205]

Issues without a valid reproduction link will be closed directly.

[skyzhao1223]

i just met this problem right after i reboot my mac :(

as long as i pass any array that contains any value, this
element-ui: 2.13.2
electron: 2.0.4
vue: 2.5.16
node: v12.16.2

<el-table :data="[{one:3,two:4},{one:5,two:6}]">
      <el-table-column label="1" prop="one" />
      <el-table-column label="2" prop="two" />
</el-table>

i tried code above and it end up rendered like below

   <div class="el-table__header-wrapper">
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header">
     <colgroup>
      <col name="gutter" width="0" />
     </colgroup>
     <thead class="has-gutter">
      <tr class="">
       <th class="gutter" style="width: 0px; display: none;"></th>
      </tr>
     </thead>
    </table>
   </div>
   <div class="el-table__body-wrapper is-scrolling-none">
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
     <colgroup></colgroup>
     <tbody>
      <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> 

any idea how this happens?

i finally solved this by downgrading element-ui to 2.8.2, any version later would cause this problem.

hope someone can find the reason

[jrbenriquez]

Downgrading to 2.8.2 from 2.13.2 would be my workaround for now

I am using Element UI and Vue within a Django project that loads the webpack bundles but served by Django.

bug report

[gukandrew]

Same here. Using element-ui 2.13.0 on vue-storefront.
Even this sample doesn't work:

<el-table :data="[{one:3,two:4},{one:5,two:6}]">
      <el-table-column label="1" prop="one" />
      <el-table-column label="2" prop="two" />
</el-table>

On version 2.8.2 I only got ReferenceError: HTMLElement is not defined element ui error in console.

BUT! Downgrade to "element-ui": "2.7.2" helps! Everything seems working well.

[netbuilding]

Same problem here, el-table doesn't render correctly in my project. @miharbi same with you, I am using Laravel Nova. Do you guys have any workaround?

[miharbi]

Same problem here, el-table doesn't render correctly in my project. @miharbi same with you, I am using Laravel Nova. Do you guys have any workaround?

Hi @netbuilding, that was time ago, I not sure if the guys in this project resolved the problem, but at that time I only avoided to use that component.

[dheerajaggarwal]

I was also facing the same issue. I don't know the exact solution, but I tried the following and it fixed the issue at my end:

1. Cleared node-modules folder
2. Changed to following versions of dependencies

   "element-ui": "2.13.2",
    "vue": "2.6.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1"

1. Install the dependencies again and it worked.
   It seems that the issue is related to some dependencies related to Vue. If somebody wants to know any other information then let me know.