minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 页面分为上中下，中内容滚动布局实现

Browse Source
master
LCJ-MinYa 12 months ago
parent 5e05095bff
commit 7391ec2d5c
7 changed files with 140 additions and 17 deletions
Show Stats Download Patch File Download Diff File

114
demo/layout.html
Unescape Escape View File

@ -19,17 +19,119 @@
rel="icon" rel="icon"
href="/favicon.ico" href="/favicon.ico"
/> />
<script> <!-- Import style -->
window.process = {}; <link
</script> 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> </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> <body>
<div id="app"> <div id="app">
<h1>Welcome to vue3-mgt-template</h1> <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> </div>
</body> </body>
</html> </html>
<script> <script>
console.log(111); 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> </script>

9
src/components/AutoImport/BaseContainer/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template> <template>
<section <section
class="base-container" class="base-container"
:style="{ height: hideTabs ? 'calc(100vh - 81px)' : 'calc(100vh - 48px)' }" :style="`height: calc(100vh - ${hideTabs ? 48 : 81}px)`"
> >
<slot></slot> <slot></slot>
</section> </section>
@ -19,10 +19,11 @@ const hideTabs = computed(() => {
<style lang="scss"> <style lang="scss">
.base-container { .base-container {
overflow: auto; overflow: hidden;
display: flex; display: flex;
// flex: 1; 父元素的flex不能设置1，必须设置具体的高度数值，否则内部table不能自身内部滚动 // flex: 1; 因为base-container的父元素高度不固定，所以自身的flex不能设置1，必须设置具体的高度数值，否则内部子元素的table不能自身内部滚动
flex-direction: column; flex-direction: column;
height: calc(100vh - 81px); padding: 10px;
// height: calc(100vh - 81px); 这里由hidetabs来动态决定高度
} }
</style> </style>

9
src/components/AutoImport/BaseFooter/index.vue
Unescape Escape View File

@ -1,5 +1,12 @@
<template> <template>
<section class="base-container"> <section class="base-footer">
<slot></slot> <slot></slot>
</section> </section>
</template> </template>
<style lang="scss">
.base-footer {
display: flex;
margin-top: 10px;
}
</style>

9
src/components/AutoImport/BaseHeader/index.vue
Unescape Escape View File

@ -1,5 +1,12 @@
<template> <template>
<section class="base-container"> <section class="base-header">
<slot></slot> <slot></slot>
</section> </section>
</template> </template>
<style lang="scss">
.base-header {
display: flex;
margin-bottom: 10px;
}
</style>

2
src/components/AutoImport/BaseMain/index.vue
Unescape Escape View File

@ -9,7 +9,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
flex-shrink: 0;
overflow: auto; overflow: auto;
height: calc(100vh - 81px);
} }
</style> </style>

2
src/views/demo/layout.vue
Unescape Escape View File

@ -2,5 +2,7 @@
<iframe <iframe
src="/demo/layout.html" src="/demo/layout.html"
frameborder="0" frameborder="0"
width="100%"
height="100%"
></iframe> ></iframe>
</template> </template>

12
src/views/template/layout/index.vue
Unescape Escape View File

@ -1,14 +1,18 @@
<template> <template>
<Base-Container> <base-container>
<div class="flex">1</div> <base-header>
<el-card style="width: 100%"> 我是header </el-card>
</base-header>
<pure-table <pure-table
class="base-main" class="base-main"
:data="tableData" :data="tableData"
:columns="columns" :columns="columns"
size="large" size="large"
/> />
<div class="flex">2</div> <base-footer>
</Base-Container> <el-card style="width: 100%"> 我是footer </el-card>
</base-footer>
</base-container>
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">

Write Preview
Loading…
Cancel
Save