Quellcode durchsuchen

add scroll eventlistener

haojianlong vor 5 Jahren
Ursprung
Commit
4c987879ef
1 geänderte Dateien mit 39 neuen und 310 gelöschten Zeilen
  1. 39 310
      src/views/point/dynamicdata/addRelation/index.vue

+ 39 - 310
src/views/point/dynamicdata/addRelation/index.vue

@@ -38,9 +38,9 @@
           </div>
         </div>
         <!-- 左侧列表 -->
-        <div class="table-box" ref="lTableBody">
+        <div class="table-box">
           <div class="l-custom-table custom-table" v-loading="lTableLoading">
-            <el-table ref="multipleTable1" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="leftSelectionChange">
+            <el-table ref="lTableBody" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="leftSelectionChange">
               <el-table-column label="数据源" align="right" show-overflow-tooltip>
                 <template slot-scope="scope">{{ scope.row.Datasource }}</template>
               </el-table-column>
@@ -89,7 +89,7 @@
         <!-- 右侧列表 -->
         <div class="table-box">
           <div class="r-custom-table custom-table" v-loading="rTableLoading">
-            <el-table ref="multipleTable2" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="rightSelectionChange">
+            <el-table ref="rTableBody" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="rightSelectionChange">
               <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
               <el-table-column label="设备实例名称" width="200" class-name="bgf5" show-overflow-tooltip>
                 <template slot-scope="scope">{{ scope.row.EquipLocalName }}</template>
@@ -186,321 +186,48 @@ export default {
         pageSize: 50,
         total: 0
       },
-      options: [
-        {
-          value: "zhinan",
-          label: "指南",
-          children: [
-            {
-              value: "shejiyuanze",
-              label: "设计原则",
-              children: [
-                {
-                  value: "yizhi",
-                  label: "一致"
-                },
-                {
-                  value: "fankui",
-                  label: "反馈"
-                },
-                {
-                  value: "xiaolv",
-                  label: "效率"
-                },
-                {
-                  value: "kekong",
-                  label: "可控"
-                }
-              ]
-            },
-            {
-              value: "daohang",
-              label: "导航",
-              children: [
-                {
-                  value: "cexiangdaohang",
-                  label: "侧向导航"
-                },
-                {
-                  value: "dingbudaohang",
-                  label: "顶部导航"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          value: "zujian",
-          label: "组件",
-          children: [
-            {
-              value: "basic",
-              label: "Basic",
-              children: [
-                {
-                  value: "layout",
-                  label: "Layout 布局"
-                },
-                {
-                  value: "color",
-                  label: "Color 色彩"
-                },
-                {
-                  value: "typography",
-                  label: "Typography 字体"
-                },
-                {
-                  value: "icon",
-                  label: "Icon 图标"
-                },
-                {
-                  value: "button",
-                  label: "Button 按钮"
-                }
-              ]
-            },
-            {
-              value: "form",
-              label: "Form",
-              children: [
-                {
-                  value: "radio",
-                  label: "Radio 单选框"
-                },
-                {
-                  value: "checkbox",
-                  label: "Checkbox 多选框"
-                },
-                {
-                  value: "input",
-                  label: "Input 输入框"
-                },
-                {
-                  value: "input-number",
-                  label: "InputNumber 计数器"
-                },
-                {
-                  value: "select",
-                  label: "Select 选择器"
-                },
-                {
-                  value: "cascader",
-                  label: "Cascader 级联选择器"
-                },
-                {
-                  value: "switch",
-                  label: "Switch 开关"
-                },
-                {
-                  value: "slider",
-                  label: "Slider 滑块"
-                },
-                {
-                  value: "time-picker",
-                  label: "TimePicker 时间选择器"
-                },
-                {
-                  value: "date-picker",
-                  label: "DatePicker 日期选择器"
-                },
-                {
-                  value: "datetime-picker",
-                  label: "DateTimePicker 日期时间选择器"
-                },
-                {
-                  value: "upload",
-                  label: "Upload 上传"
-                },
-                {
-                  value: "rate",
-                  label: "Rate 评分"
-                },
-                {
-                  value: "form",
-                  label: "Form 表单"
-                }
-              ]
-            },
-            {
-              value: "data",
-              label: "Data",
-              children: [
-                {
-                  value: "table",
-                  label: "Table 表格"
-                },
-                {
-                  value: "tag",
-                  label: "Tag 标签"
-                },
-                {
-                  value: "progress",
-                  label: "Progress 进度条"
-                },
-                {
-                  value: "tree",
-                  label: "Tree 树形控件"
-                },
-                {
-                  value: "pagination",
-                  label: "Pagination 分页"
-                },
-                {
-                  value: "badge",
-                  label: "Badge 标记"
-                }
-              ]
-            },
-            {
-              value: "notice",
-              label: "Notice",
-              children: [
-                {
-                  value: "alert",
-                  label: "Alert 警告"
-                },
-                {
-                  value: "loading",
-                  label: "Loading 加载"
-                },
-                {
-                  value: "message",
-                  label: "Message 消息提示"
-                },
-                {
-                  value: "message-box",
-                  label: "MessageBox 弹框"
-                },
-                {
-                  value: "notification",
-                  label: "Notification 通知"
-                }
-              ]
-            },
-            {
-              value: "navigation",
-              label: "Navigation",
-              children: [
-                {
-                  value: "menu",
-                  label: "NavMenu 导航菜单"
-                },
-                {
-                  value: "tabs",
-                  label: "Tabs 标签页"
-                },
-                {
-                  value: "breadcrumb",
-                  label: "Breadcrumb 面包屑"
-                },
-                {
-                  value: "dropdown",
-                  label: "Dropdown 下拉菜单"
-                },
-                {
-                  value: "steps",
-                  label: "Steps 步骤条"
-                }
-              ]
-            },
-            {
-              value: "others",
-              label: "Others",
-              children: [
-                {
-                  value: "dialog",
-                  label: "Dialog 对话框"
-                },
-                {
-                  value: "tooltip",
-                  label: "Tooltip 文字提示"
-                },
-                {
-                  value: "popover",
-                  label: "Popover 弹出框"
-                },
-                {
-                  value: "card",
-                  label: "Card 卡片"
-                },
-                {
-                  value: "carousel",
-                  label: "Carousel 走马灯"
-                },
-                {
-                  value: "collapse",
-                  label: "Collapse 折叠面板"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          value: "ziyuan",
-          label: "资源",
-          children: [
-            {
-              value: "axure",
-              label: "Axure Components"
-            },
-            {
-              value: "sketch",
-              label: "Sketch Templates"
-            },
-            {
-              value: "jiaohu",
-              label: "组件交互文档"
-            }
-          ]
-        }
-      ]
     };
   },
   created() {
     this.init();
   },
   mounted() {
-    let that = this;
-    let lTableBody = this.$refs.lTableBody;
-    lTableBody.addEventListener("scroll", () => {
-      let scrollTop = lTableBody.scrollTop;
-      let scrollHeight = lTableBody.scrollHeight;
-      let offsetHeight = lTableBody.offsetHeight;
-      if (scrollTop + offsetHeight >= scrollHeight) {
-        console.log("request");
-        this.lTableLoading = true;
-        setTimeout(() => {
-          this.lTableLoading = false;
-          this.LtableData.push({
-            date: "2016-05-02",
-            name: "王小虎",
-            id: new Date().getTime(),
-            checked: false,
-            address: "上海市普陀区金沙江路 1518 弄"
-          });
-        }, 1000);
+    this.lTableBody = this.$refs.lTableBody.bodyWrapper;
+    this.rTableBody = this.$refs.rTableBody.bodyWrapper;
+
+    this.lTableBody.addEventListener("scroll", () => {
+      // 滚动距离
+      let scrollTop = this.lTableBody.scrollTop;
+      // 变量windowHeight是可视区的高度
+      let windowHeight =
+        this.lTableBody.clientHeight || this.lTableBody.clientHeight;
+      // 变量scrollHeight是滚动条的总高度
+      let scrollHeight =
+        this.lTableBody.scrollHeight || this.lTableBody.scrollHeight;
+      if (scrollTop + windowHeight === scrollHeight) {
+        if (this.lPage.pageNumber * this.lPage.pageSize < this.lPage.total) {
+          this.lPage.pageNumber++;
+          this.getLeftData();
+        }
+      }
+    });
+    this.rTableBody.addEventListener("scroll", () => {
+      // 滚动距离
+      let scrollTop = this.rTableBody.scrollTop;
+      // 变量windowHeight是可视区的高度
+      let windowHeight =
+        this.rTableBody.clientHeight || this.rTableBody.clientHeight;
+      // 变量scrollHeight是滚动条的总高度
+      let scrollHeight =
+        this.rTableBody.scrollHeight || this.rTableBody.scrollHeight;
+      if (scrollTop + windowHeight === scrollHeight) {
+        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
+        if (this.rPage.pageNumber * this.rPage.pageSize < this.rPage.total) {
+          this.rPage.pageNumber++;
+          this.getRightData();
+        }
       }
     });
-    let rTableBody = this.$refs.rTableBody;
-    // rTableBody.addEventListener("scroll", () => {
-    //   let scrollTop = rTableBody.scrollTop;
-    //   let scrollHeight = rTableBody.scrollHeight;
-    //   let offsetHeight = rTableBody.offsetHeight;
-    //   if (scrollTop + offsetHeight >= scrollHeight) {
-    //     console.log("request");
-    //     this.rTableLoading = true;
-    //     setTimeout(() => {
-    //       this.rTableLoading = false;
-    //       this.RtableData.push({
-    //         date: "2016-05-02",
-    //         name: "王小虎",
-    //         id: new Date().getTime(),
-    //         checked: false,
-    //         address: "上海市普陀区金沙江路 1518 弄"
-    //       });
-    //     }, 1000);
-    //   }
-    // });
   },
   computed: {
     ...mapGetters("layout", ["projectId"]),
@@ -596,6 +323,7 @@ export default {
       }
       this.lTableLoading = true;
       dynamicPendingPoint(param, res => {
+        this.lPage.total = res.Total;
         if (this.lPage.pageNumber == 1) {
           this.LtableData = res.Content;
         } else {
@@ -629,6 +357,7 @@ export default {
       // }
       this.rTableLoading = true;
       dynamicPendingobjs(param, res => {
+        this.rPage.total = res.Total;
         if (this.rPage.pageNumber == 1) {
           this.RtableData = res.Content;
         } else {