vue3+element-plus在html中使用表格组件问题

最新推荐文章于 2024-10-09 21:48:33 发布

王鹏飞的解忧屋

最新推荐文章于 2024-10-09 21:48:33 发布

阅读量1.2k

点赞数 6

分类专栏： Vue 文章标签： html elementui vue.js

本文链接：https://blog.csdn.net/ajiuyuan/article/details/125160606

版权

Vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

按照官方引入的组件写法。

在Vue3+element-plus在普通引入方法

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
</el-table>

自己新建的HTML文件如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- 导入 Vue 3 -->
  <script src="https://unpkg.com/vue@next"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- 导入组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
</head>
<body>
  <div id="app">
    <el-button>{{ message }}</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
  <script >
    const App = {
      data() {
        return {
          message: "Hello Element Plus",
          tableData:[
            {
              date: '2016-05-03',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
            },
            {
              date: '2016-05-02',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
            },
            {
              date: '2016-05-04',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
            },
            {
              date: '2016-05-01',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
            },
          ]
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
  </script>
</body>
</html>

显示效果如下：

代码Bug改正，将模板中的组件修改为如下代码即可：

<el-table :data="tableData" >
      <el-table-column prop="date" label="Date" width="180" ></el-table-column>
      <el-table-column prop="name" label="Name" width="180" ></el-table-column>
      <el-table-column prop="address" label="Address" ></el-table-column>
</el-table>