RicardoWee 2022-06-26 13:52 采纳率: 63.6%
浏览 47
已结题

如何在html文件中使用element组件

问题遇到的现象和发生背景

个人学了html和css,现在在学vue和element。一直都是用cdn引入依赖文件的,所以很多步骤不是很清楚。
就比如这里,如何直接使用element组件呢?单html文件内?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 导入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 导入 Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <template>
        <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>
    </template>
</div>

<script>
    const App = {
        data() {
            return {
                message: 15
            }
        }
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
</script>
<script lang="ts" setup>
    const 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',
        },
    ]
</script>

</body>
</html>

我看element的网站上给的文档是直接丢了这个组件的基础代码。但我不知道如何使用它,就是让这个表格能在上面的html页面中展示出来。我在上面拷贝进去但似乎并没有效果的样子。

<template>
  <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>
</template>

<script lang="ts" setup>
const 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',
  },
]
</script>


控制台跳出为

Property "tableData" was accessed during render but is not defined on instance. 
  at <App>

当然,如果还是需要完整安装依赖文件才能生效,还请各位也说下要怎么弄,谢谢。

  • 写回答

2条回答 默认 最新

  • 「已注销」 2022-06-26 14:32
    关注

    要么用cdn要么就下依赖文件,搜npm下载依赖就行了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月25日
  • 已采纳回答 10月17日
  • 创建了问题 6月26日

悬赏问题

  • ¥15 linux驱动,linux应用,多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器,如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助