From faf9642920d7b981c54d55608e383e97aa022a5c Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 18 三月 2024 15:46:37 +0800
Subject: [PATCH] feat:成绩表格
---
src/views/screen/components/screen-examine/components/examine-table.vue | 109 ++++++++++++++++++++++++++++++++++++
src/views/screen/components/screen-examine/index.vue | 30 ++++++---
2 files changed, 129 insertions(+), 10 deletions(-)
diff --git a/src/views/screen/components/screen-examine/components/examine-table.vue b/src/views/screen/components/screen-examine/components/examine-table.vue
new file mode 100644
index 0000000..b66611f
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/examine-table.vue
@@ -0,0 +1,109 @@
+<template>
+ <div class="table-container">
+ <div class="table-content">
+ <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight">
+ <el-table-column prop="date" label="鎺掑悕" align="center">
+ </el-table-column>
+ <el-table-column prop="name" label="鍚嶇О" align="center">
+ </el-table-column>
+ <el-table-column prop="address" label="鎴愮哗" align="center">
+ </el-table-column>
+ </el-table>
+ </div>
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ tableHeight: 40,
+ tableData: [{
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ },
+ ]
+ }
+ },
+ methods: {
+ computedHeight() {
+ this.$nextTick(() => {
+
+ })
+ const content = this.$refs.tabContent;
+ console.log(content);
+ // this.tableHeight = content.clientHeight;
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.computedHeight();
+
+ },1000)
+
+ })
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+ width: 100%;
+ flex: 1;
+ border: 1px solid red;
+ position: relative;
+
+ .table-content {
+ position: absolute;
+ width: 100%;
+ top: 0;
+ bottom: 0;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index eccbc90..3e7ef83 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -3,7 +3,8 @@
<wrapper-title :title="'鑰冩牳鎴愮哗鏁版嵁'"></wrapper-title>
<div class="examine-content">
<div class="examine-wrapper">
- <examine-chart></examine-chart>
+ <examine-chart class="wrapper-item"></examine-chart>
+ <examine-table class="wrapper-item"></examine-table>
</div>
</div>
</div>
@@ -12,11 +13,13 @@
<script>
import WrapperTitle from '../wrapper-title/index';
import ExamineChart from './components/examine-chart';
+import ExamineTable from './components/examine-table';
export default {
name: 'ScreenExamine',
components: {
WrapperTitle,
- ExamineChart
+ ExamineChart,
+ ExamineTable
}
}
@@ -29,19 +32,26 @@
display: flex;
flex-direction: column;
}
+
.examine-content {
width: 100%;
flex: 1;
+ position: relative;
+
+ .examine-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.wrapper-item {
background: rgba(67, 102, 155, 0.3);
border: 1px solid rgba(47, 91, 157, 0.8);
- padding: 20px 20px;
- position: relative;
- .examine-wrapper {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ margin-bottom: 20px;
+ &:last-of-type {
+ margin-bottom: 0;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0