更换仓库

vue/gold-system/src/views/z.vue

@@ -2,21 +2,21 @@
 import { ref, onMounted, reactive, computed, nextTick } from "vue";
 
 // 变量
-let allData = []
-let tableData = []
-let elTableHeight = 0  //el-table的高度
-let theadHeight = 0  //表头的高度
-let contentHeight = 0 //主要内容高度
-let showRowCount = 0 //一共能显示多少行 
-let falseBox = 0  //后边假盒子的高度
-let scollBoxHeight = 0 //假滚动条的高度
-let scrollTopRowCount = 0 //一共向上滚动了多少行
+const allData = ref([]);
+const tableData = ref([]);
+const elTableHeight = ref('');
+const theadHeight = ref('');
+const contentHeight = ref(0);
+const showRowCount = ref(0);
+const falseBox = ref(null);
+const scollBoxHeight = ref(0);
+const scrollTopRowCount = ref(0);
 
 // 方法
 onMounted(async function () {
-    allData = [];
+    allData.value = [];
     for (let i = 0; i < 10000; i++) {
-        allData.push({
+        allData.value.push({
             name: '张三' + i,
             age: 20 + i,
             address: '北京市海淀区' + i,
@@ -24,31 +24,25 @@ onMounted(async function () {
             date: '2022-01-01'
         })
     }
-    scollBoxHeight = 45 * allData.length + 45; //多加一行，要不然滚动到底差一行
-    await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
+    scollBoxHeight.value = 45 * allData.value.length + 45; //多加一行，要不然滚动到底差一行
     nextTick(() => {
-        elTableHeight = document.querySelector('.table-box .el-table').offsetHeight;
-        theadHeight = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight;
-        contentHeight = elTableHeight - theadHeight;
-        showRowCount = Math.floor(contentHeight / 45);
+        elTableHeight.value = document.querySelector('.table-box .el-table').offsetHeight;
+        theadHeight.value = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight;
+        console.log("elTableHeight", elTableHeight.value);
+        console.log("theadHeight", theadHeight.value);
+        contentHeight.value = elTableHeight.value - theadHeight.value;
+        console.log("contentHeight", contentHeight.value);
+        showRowCount.value = Math.floor(contentHeight.value / 45);
+        console.log("showRowCount", showRowCount.value);
         // 获取默认显示的前 <showRowCount> 条
-        tableData = JSON.parse(JSON.stringify(allData)).splice(0, showRowCount);
+        tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(0, showRowCount.value);
     })
-    falseBox = document.querySelector('.false-box');
-    falseBox.addEventListener('scroll', function (e) {
-        scrollTopRowCount = Math.ceil(e.target.scrollTop / 45);
+    falseBox.value = document.querySelector('.false-box');
+    falseBox.value.addEventListener('scroll', function (e) {
+        scrollTopRowCount.value = Math.ceil(e.target.scrollTop / 45);
         // 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
-        tableData = JSON.parse(JSON.stringify(allData)).splice(scrollTopRowCount, showRowCount);
+        tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(scrollTopRowCount.value, showRowCount.value);
     });
-    console.log(allData)
-    console.log(elTableHeight)
-    console.log(theadHeight)
-    console.log(contentHeight)
-    console.log(showRowCount)
-    console.log(falseBox)
-    console.log(scollBoxHeight)
-    console.log(tableData)
-
 })
 
 </script>
@@ -56,13 +50,14 @@ onMounted(async function () {
 <template>
     <div class="box" style="width: 1000px; height: 500px; overflow: hidden; position: relative;">
         <!-- false-box这是一个用来显示滚动条的方法 -->
-        <div class="false-box" style="width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; overflow: auto;">
+        <div class="false-box"
+            style="width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; overflow: auto;">
             <div class="scroll-box" :style="{ 'height': scollBoxHeight + 'px' }">
                 <!-- scroll-box是用来撑起盒子的方法 -->
             </div>
         </div>
         <div class="table-box">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table class="el-table" :data="allData" style="width: 100%">
                 <el-table-column prop="name" label="姓名" width="180">
                 </el-table-column>
                 <el-table-column prop="age" label="年龄" width="180">
@@ -89,7 +84,7 @@ onMounted(async function () {
     position: relative;
 }
 
-.box .false-box {
+.false-box {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -98,7 +93,7 @@ onMounted(async function () {
     overflow: auto;
 }
 
-.box .false-box .scroll-box {
+.scroll-box {
     width: 100%;
     height: 1000px;
     position: absolute;
@@ -106,7 +101,7 @@ onMounted(async function () {
     left: 0%;
 }
 
-.box .table-box {
+.table-box {
     width: calc(100% - 20px);
     height: 100%;
     position: absolute;