问题遇到的现象和发生背景
个人学了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>
当然,如果还是需要完整安装依赖文件才能生效,还请各位也说下要怎么弄,谢谢。