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>