触底刷新

package.json

@@ -23,6 +23,7 @@
     "axios": "0.27.2",
     "clipboard": "^2.0.11",
     "echarts": "5.4.0",
+    "el-table-infinite-scroll": "^3.0.3",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",

src/layout/indexCommon.vue

@@ -9,7 +9,7 @@
           <div class="search">
             <el-input style="position: relative;" v-model="searchText" maxlength="32" class="w-50 m-2" size="small" placeholder="搜索文件" clearable
               @keyup.enter="toSearch" />
-            <el-icon style="position: absolute;top: 15px;left: 1000px;z-index: 1;" @click="toSearch">
+            <el-icon style="position: absolute;top: 15px;left: 1190px;z-index: 1;" @click="toSearch">
               <Search />
             </el-icon>
           </div>
@@ -598,7 +598,6 @@ const filePaneClick = (item) => {
   localStorage.setItem("inChat", 0)
   console.log("filePaneClickitem", item);
   isSwitchFileIframe.value = true
-  console.log(98588546543);
   const row = toRaw(item);
   const arr = iFrameData.value.map((par) => {
     if (par.id === row.id) {

src/views/search/index.vue

@@ -44,11 +44,12 @@
       </div>
     </div>
     <!-- 文件列表 -->
-    <div class="fileList" @scroll="mouseScroll">
+    <div class="fileList">
       <div>
-        <div v-if="isList">
+        <div v-if="isList" style="height: calc(98vh - 420px);overflow-y: auto;">
           <!-- 表格 -->
-          <el-table :data="tableData" style="width: 100%" :scrollbar-always-on="true">
+          <el-table :data="tableData" style="width: 100%;height:calc(98vh - 420px) ;" ref="container"
+            @scroll="handleScroll">
             <el-table-column fixed label="名称" width="500">
               <template #default="scope">
                 <div class="flie_name">
@@ -82,8 +83,8 @@
           <div class="tile_box">
             <div class="file_box" v-for="item in tableData" :key="item">
               <img class="big_file_img" :src="setIcon(item.fileType)" alt="" />
-              <span style="width: 90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.fileName
-              }}</span>
+              <span class="missing">{{ item.fileName }}</span>
+              <span class="missingPass">{{ item.fileName }}</span>
             </div>
           </div>
         </div>
@@ -98,6 +99,7 @@ import { search } from "@/api/search/search.js";
 import { flieSearch } from "@/api/search/search.js";
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
 import Pagination from "@/components/Pagination/index.vue";
+import { ElTable, ElTableColumn, ElInfiniteScroll } from 'element-plus';
 //---------------导入图片--------------------------
 import file_DOC from "@/assets/images/fileType/file_DOC.png";
 import file_pdf from "@/assets/images/fileType/file_pdf.png";
@@ -127,27 +129,12 @@ const total = ref(0);
 const page = ref(1);
 const limit = ref(2); //pagesize
 //---------------------------
-
+const container = ref(null)
 const historyParams = history.state.params
 console.log('historyParams', historyParams);
 
 const reload = inject("reload");
-onMounted(() => {
-  // let route = useRoute();
-  // console.log( history.state, 'route');
-  const JparData = history.state.clickRowId
-  const parData = JSON.parse(JparData)
-  // console.log(parData, 'parData');
-  searchText.value = parData.searchText;
-  let searchData = parData.searchData;
-  // console.log("searchData", searchData);
-  baseData.value = searchData.rows;
-  tableData.value = searchData.rows;
-  console.log(baseData.value, tableData.value, 'value');
-  total.value = searchData.total;
-  changeSearchFor(searchFor.value);
-  // console.log("total", baseData.value);
-});
+
 const tableData = ref([]);
 // 切换搜索范围
 const changeSearchFor = (name) => {
@@ -167,12 +154,14 @@ const changeSearchType = (name) => {
     tableData.value = baseDataObj
   } else {
     // 获取分类具体数据
-    console.log(name,'name');
+    console.log(name, 'name');
     const typeArr = setType(name);
-    console.log(typeArr,'类型');
+    console.log(typeArr, '类型');
     tableData.value = toRaw(baseDataObj).filter((item) => {
+      console.log(item,'遍历');
       return typeArr.includes(item.fileType) && item.space.spaceType === searchFor.value;
     });
+    console.log(tableData.value,'数组');
   }
 };
 const changeShow = () => {
@@ -265,7 +254,7 @@ const setIcon = (fileType) => {
 const setType = (fileType) => {
   switch (fileType) {
     case "doc":
-      return [".txt", ".ppt", ".pdf", ".docx", ".csv", ".wps", ".xls", '.pptxs', '.dll', 'pptx', '.doc'];
+      return [".txt", ".ppt", ".pdf", ".docx", ".csv", ".wps", ".xls", '.pptxs', '.dll', '.pptx', '.doc'];
       break;
     case "img":
       return [".png", ".jpg", ".jpeg"];
@@ -299,9 +288,38 @@ function formatFileSize(fileSize) {
     return fileSize + "B";
   }
 }
-function mouseScroll() {
-  console.log('鼠标滚动了！');
+let numnum = 1
+async function handleScroll(e) {
+  // console.log(e, '出发了');
+  const tableContainer = e.target;
+  const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
+  const contentHeight = tableContainer.scrollHeight;
+  console.log(scrollPosition,contentHeight,'对比');
+  if (scrollPosition + 0.40005 >= contentHeight) {
+    numnum++
+    const query = {
+      keyword: searchText.value,
+      isAsc: "asc",
+      orderByColumn: "createTime",
+      pageSize: 10,
+      pageNum: numnum,
+    };
+    const res = await flieSearch(query);
+    tableData.value = [...tableData.value,...res.rows]
+  }
 }
+onMounted(() => {
+  let antherContainer = container.value.$el.querySelector('.el-scrollbar__wrap')
+  antherContainer.addEventListener('scroll', handleScroll);
+  const JparData = history.state.clickRowId
+  const parData = JSON.parse(JparData)
+  searchText.value = parData.searchText;
+  let searchData = parData.searchData;
+  baseData.value = searchData.rows;
+  tableData.value = searchData.rows;
+  total.value = searchData.total;
+  changeSearchFor(searchFor.value);
+});
 onBeforeRouteUpdate((to, from) => {
   console.log('to', to);
   console.log('from', from);
@@ -612,4 +630,27 @@ watch(() => history, (newValue, oldValue) => {
     }
   }
 }
+
+.missing {
+  width: 90px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.missing:hover~.missingPass {
+  display: block;
+}
+
+.missingPass {
+  display: none;
+  width: 140px;
+  background-color: black;
+  border-radius: 5px;
+  color: white;
+  text-align: center;
+  z-index: 30 important;
+  margin-left: 25px;
+  font-size: 14px;
+}
 </style>