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