elementUi - table實現滾動加載

vue+element-ui table實現滾動加載

自定義指令實現

第一步：在main.js里注冊

Vue.directive('loadmore', {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          let sign = 0
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    })

注意：

scrollHeight：指元素的總高度，包含滾動條中的內容。只讀屬性。不帶px單位。就是下圖中，54條數據的高度，但是因為有滾動條，所以屏幕看不到這么高
scrollTop：當元素出現滾動條時，向下拖動滾動條，內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條，則scrollTop的值為0，該值只能是正值。就是下圖中紅色框的高度
clientHeight：元素客戶區的大小，指的是元素內容及其邊框所占據的空間大小，實際上就是可視區域的大小。就是下圖紅色箭頭的高度
scrollHeight-scrollTop-clientHeight=0，這個時候可以就是滾動條滾到底部的時候了。（如果表格有padding,margin值，需要減去）

第二步：在組件中，使用自定義的事件

v-loadmore=“loadMore”

<el-table
              :data="build"
              :height="tableheight"
              style="width: 100%"
              :header-cell-style="rowclass"
              :row-class-name="tableRowClassName"
              :cell-style="{'text-align':'center'}"
              border
              fit
              v-if="tabindex == 0 && isPower == '煤電'"
              ref="tableright1"
              v-loadmore="loadMore"
              tooltip-effect="dark"
            >
</el-table>

在methods中調用loadMore

//表格滾動加載
    tableloadMore () {
      if (this.currentPage < this.totalPage) {//當前頁數小於總頁數就請求 
        this.currentPage++;//當前頁數自增
        this.$axios({
                method:'get',
                url:this.api+'admin/StockLevel',
                params:{
                    enabled:this.value1,
                    page:this.page,
                        limit:this.limit
                }
            }).then(res=>{
                this.build = res.data.data.arr
            })
      }else{
          console.log('到底了', this.page)
      }
    }

example

<template>
  <div class="content">
    <el-tabs v-model="activeName">
      <el-tab-pane label="全部對賬訂單" name="all" />
      <el-tab-pane label="未對賬" name="0" />
      <el-tab-pane label="對賬中" name="1" />
      <el-tab-pane label="已對賬" name="2" />
    </el-tabs>
    <div class="control-line">
      <el-date-picker
        v-model="dateValue"
        type="datetimerange"
        size="small"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        value-format="timestamp"
        align="right"
        @change="dateChange"
      ></el-date-picker>
      <el-button
        size="small"
        :disabled="!checkboxData.length"
        type="primary"
        @click="dialogFormVisible = true"
      >導出</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :border="true"
      height="216"
      v-loadmore="loadmore"
      ref="loadmore"
      @selection-change="selectionchange"
    >
      <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
      <el-table-column prop="orderCode" label="訂單編號"></el-table-column>
      <el-table-column prop="billCode" label="對賬單號"></el-table-column>
      <el-table-column prop="calcState" label="對賬單狀態">
        <template
          slot-scope="scope"
        >{{scope.row.calcState==='0'?'未對賬':scope.row.calcState==='1'?'對賬中':'已對賬'}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="交易時間"></el-table-column>
      <el-table-column prop="buyerName" label="買家名稱"></el-table-column>
      <el-table-column prop="sellerName" label="賣家名稱"></el-table-column>
      <el-table-column prop="amount" label="訂單總額"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="toDetail(scope.row)">查看詳情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="確認訂單" :visible.sync="dialogFormVisible">
      <el-table
        :data="checkboxData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        :border="true"
        max-height="516"
      >
        <el-table-column prop="orderCode" label="訂單編號"></el-table-column>
        <el-table-column prop="createTime" label="交易時間"></el-table-column>
        <el-table-column prop="buyerName" label="買家名稱"></el-table-column>
        <el-table-column prop="sellerName" label="賣家名稱"></el-table-column>
        <el-table-column prop="amount" label="訂單總額"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmExport">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList } from "@/views/admin/api/shop-supplierOrder";
export default {
  data() {
    const pickerOptions = {
      shortcuts: [
        {
          text: "最近一周",
          onClick: function(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "最近一個月",
          onClick: function(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "最近三個月",
          onClick: function(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          }
        }
      ]
    };
    return {
      scrollNode: null,
      activeName: "all",
      dateValue: "",
      pickerOptions,
      tableData: [],
      dialogFormVisible: false,
      checkboxData: [],
      tempChooseData: null,
      isloadmore: false,
      listQuery: {
        calcState: "",
        // 搜索條件
        pageNum: 1,
        pageSize: 3,
        startTime: "",
        endTime: "",
        orderStatus: "COMPLETED"
      },
      pageSize: 3,
      total: 0,
      loading: true
    };
  },
  directives: {
    loadmore: {
      bind(el, binding) {
        const selectWrap = el.querySelector(".el-table__body-wrapper");
        selectWrap.addEventListener("scroll", function() {
          let sign = 0;
          const scrollDistance =
            this.scrollHeight - this.scrollTop - this.clientHeight;
          if (scrollDistance <= sign) {
            binding.value();
          }
        });
      }
    }
  },
  watch: {
    activeName: function(val) {
      this.listQuery.calcState = val === "all" ? "" : val;
      this.listQuery.pageSize = this.pageSize;
      this.init();
    }
  },
  created() {
    this.init();
  },
  methods: {
    loadmore() {
      if (this.listQuery.pageNum < this.total) {
        this.listQuery.pageNum += 1;
        this.isloadmore = true;
        this.getList();
      } else {
        this.$message.warning("沒有更多了……");
      }
    },
    init() {
      if (this.$refs.loadmore)
        this.$refs.loadmore.$el.querySelector(
          ".el-table__body-wrapper"
        ).scrollTop = 0;
      this.isloadmore = false;
      this.listQuery.pageNum = 1;
      this.tableData = [];
      this.checkboxData = [];
      this.getList();
    },
    getList() {
      this.tempChooseData = JSON.parse(JSON.stringify(this.checkboxData));
      getList(this.listQuery).then(res => {
        this.tableData = this.tableData.concat(res.data);
        this.total = res.pages;
        this.loading = false;
        if (this.isloadmore) {
          //   setTimeout(() => {
          this.$nextTick(() => {
            this.tableData.forEach(v => {
              if (this.tempChooseData.some(m => m.id === v.id)) {
                this.$refs.loadmore.toggleRowSelection(v);
              }
            });
          });
          //   }, 100);
        }
      });
    },
    dateChange: function(value) {
      if (value) {
        this.listQuery.startTime = value[0];
        this.listQuery.endTime = value[1];
      } else {
        this.listQuery.startTime = null;
        this.listQuery.endTime = null;
      }
      this.init();
    },
    selectable(item, index) {
      return item.calcState == "0";
    },
    selectionchange(arr) {
      this.checkboxData = arr;
    },
    confirmExport() {}
  }
};
</script>
<style lang="scss" scoped>
.control-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>