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