Bladeren bron

解决表格滚动加载时报错问题

zhuliu 8 maanden geleden
bovenliggende
commit
1e7b645adf
3 gewijzigde bestanden met toevoegingen van 46 en 4 verwijderingen
  1. 2 2
      src/main.js
  2. 3 2
      src/utils/direct/index.js
  3. 41 0
      src/utils/direct/tableInfiniteScroll.js

+ 2 - 2
src/main.js

@@ -58,8 +58,8 @@ import vmFunction from './utils/window'
 Vue.use(vmFunction)
 
 //el-table滚动加载
-import elTableInfiniteScroll from 'el-table-infinite-scroll'
-Vue.use(elTableInfiniteScroll)
+// import elTableInfiniteScroll from 'el-table-infinite-scroll'
+// Vue.use(elTableInfiniteScroll)
 
 
 Vue.config.productionTip = false

+ 3 - 2
src/utils/direct/index.js

@@ -344,7 +344,7 @@ const equal_heights = {
       },
 }
 
-
+import elTableInfiniteScroll from './tableInfiniteScroll.js'
 
 const directives = {
     draggable,
@@ -353,7 +353,8 @@ const directives = {
     DivHeight, 
     equal_heights,
     shake,
-    dialogDrag
+    dialogDrag,
+    elTableInfiniteScroll
 };
 // 这种写法可以批量注册指令
 export default {

+ 41 - 0
src/utils/direct/tableInfiniteScroll.js

@@ -0,0 +1,41 @@
+
+import elInfiniteScroll from 'element-ui/lib/infinite-scroll';
+
+const elInserted = elInfiniteScroll.inserted;
+const elUnbind = elInfiniteScroll.unbind;
+const elScope = 'ElInfiniteScroll';
+
+export default {
+  inserted(el, binding, ...params) {
+    // 获取 table 中的滚动层
+    const scrollElem = el.querySelector('.el-table__body-wrapper');
+
+    // 如果没找到元素,返回错误
+    if (!scrollElem) {
+      throw 'table-infinite-scroll: 找不到 .el-table__body-wrapper 容器';
+    }
+
+    // 设置自动滚动
+    scrollElem.style.overflowY = 'auto';
+
+    // 加入滚动路基
+    setTimeout(() => {
+      elInserted(scrollElem, binding, ...params);
+
+      // 将子集的引用放入 el 上,用于 unbind 中销毁事件
+      el[elScope] = scrollElem[elScope];
+    });
+  },
+  unbind: function unbind(el) {
+        var _el$scope = el[elScope]
+        if(!_el$scope){
+            return
+        }
+           var container = _el$scope.container,
+            onScroll = _el$scope.onScroll;
+    
+        if (container) {
+          container.removeEventListener('scroll', onScroll);
+        }
+    }
+};