【Electron-Vue】使用 el-table 死活不显示的问题

原创已于 2022-07-11 13:48:33 修改 · 8.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #elementui

于 2022-05-26 16:53:03 首次发布

Electron 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在Electron-Vue项目中解决el-table无法正常显示的方法。通过在webpack配置文件中将element-ui添加到白名单，可以确保el-table及其数据正确渲染。

electron-vue中在使用el-table时，死活不显示表格和数据，控制台上显示高度为0，你以为是自己的数据没有绑定上去？但是有又数据，怎么办呢？

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

我们需要把element-ui加入到.electron-vue/webpack.renderer.config.js 文件中的白名单里面在这句话let whiteListedModules = [‘vue’]添加element-ui组件修改为let whiteListedModules = [‘vue’, ‘element-ui’]再运行项目，便能够成功构建出el-table表格了
在这里插入图片描述