|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta
|
|
|
http-equiv="X-UA-Compatible"
|
|
|
content="IE=edge,chrome=1"
|
|
|
/>
|
|
|
<meta
|
|
|
name="renderer"
|
|
|
content="webkit"
|
|
|
/>
|
|
|
<meta
|
|
|
name="viewport"
|
|
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
|
|
/>
|
|
|
<title>vue3-mgt-template</title>
|
|
|
<link
|
|
|
rel="icon"
|
|
|
href="/favicon.ico"
|
|
|
/>
|
|
|
<!-- Import style -->
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="//unpkg.com/element-plus/dist/index.css"
|
|
|
/>
|
|
|
<!-- Import Vue 3 -->
|
|
|
<script src="//unpkg.com/vue@3"></script>
|
|
|
<!-- Import component library -->
|
|
|
<script src="//unpkg.com/element-plus"></script>
|
|
|
</head>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
html,
|
|
|
body,
|
|
|
#app {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.base-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.base-header {
|
|
|
background-color: #f5f5f5;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.base-main {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
flex-shrink: 0;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
.base-footer {
|
|
|
background-color: #dbdbdb;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
<div id="app">
|
|
|
<div class="base-container">
|
|
|
<div class="base-header">这是<br />header内容</div>
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
size="large"
|
|
|
class="base-main"
|
|
|
border
|
|
|
>
|
|
|
<el-table-column
|
|
|
prop="time"
|
|
|
label="时间"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="name"
|
|
|
label="姓名"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="address"
|
|
|
label="地址"
|
|
|
></el-table-column>
|
|
|
<!-- 下面的写法会导致table渲染错误，多行表头，内容也只有地址最后一栏，原因是
|
|
|
解释： 由于原生的 HTML 解析行为的限制，单个闭合标签可能会导致一些例外情况，所以请使用双封闭标签，
|
|
|
|
|
|
详细解释：然而在 DOM 内模板中，我们必须显式地写出关闭标签：
|
|
|
<my-component></my-component>
|
|
|
这是由于 HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是 <input> 和 <img>。对于其他的元素来说，如果你省略了关闭标签，原生的 HTML 解析器会认为开启的标签永远没有结束
|
|
|
https://cn.vuejs.org/guide/essentials/component-basics#in-dom-template-parsing-caveats
|
|
|
-->>
|
|
|
<!-- <el-table-column
|
|
|
prop="time"
|
|
|
label="时间"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
prop="name"
|
|
|
label="姓名"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
prop="address"
|
|
|
label="地址"
|
|
|
/> -->
|
|
|
</el-table>
|
|
|
<div class="base-footer">这是<br />footer<br />内容</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
<script>
|
|
|
const App = {
|
|
|
data() {
|
|
|
return {
|
|
|
message: 'Hello Element Plus',
|
|
|
tableData: [
|
|
|
{
|
|
|
time: '2016-05-03',
|
|
|
name: 'Tom',
|
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
for (let i = 0; i < 100; i++) {
|
|
|
this.tableData.push(this.tableData[0]);
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
const app = Vue.createApp(App);
|
|
|
app.use(ElementPlus);
|
|
|
app.mount('#app');
|
|
|
</script>
|