[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-tableheader-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-tableheader" style="width: 1388px;"><colgroup></colgroup><thead class=""><tr class=""></tr></thead></table></div><div class="el-tablebody-wrapper is-scrolling-none"><table cellspacing="0" cellpadding="0" border="0" class="el-tablebody" 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"

3. 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.

[WouterSioen]

https://github.com/ElemeFE/element/issues/15846#issuecomment-521545057

This solved it for me. Looks like it's a problem in the dist file for Vue in later versions.

[KR34T1V]

After upgrading from webpack 4 - 5 the most basic tables simply do not render, all the other element components render fine though. Downgrading to 2.8.2 did not work either. Vue dev tools show all the data and columns but the table body does not render any data and is just an empty block.

We are importing as follows:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

[plant-grey-trees]

Found the solution here.

https://github.com/ElemeFE/element/issues/21662

There are duplicate packages for Vue, you just need to remove duplicates by adding this to your webpack.config.js:

resolve: {
    alias: {
      'vue': path.resolve(__dirname, '../', 'node_modules', 'vue'),
    },
  },

[wjh000123]

Found the solution here.

21662

There are duplicate packages for Vue, you just need to remove duplicates by adding this to your webpack.config.js:

resolve: {
    alias: {
      'vue': path.resolve(__dirname, '../', 'node_modules', 'vue'),
    },
  },

for me, the structure is a little bit different, so the code would be:

 resolve: {
     alias: {
       'vue': path.resolve(__dirname, 'node_modules', 'vue'),
     },
   },

it depends on the webpack config file location and node_modules.

[raonsol]

I am using vite and yarn berry PnP mode, and resolved this issue by changing vite.config.js below.

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': require.resolve('vue'),
    },
    // extra configs...
  },
});