vue移动端 表格 数据渲染

vue移动端 表格 数据渲染

    <div class="box_top2">
        <el-table ref="table" v-loading="loading" max-height="500px" :data="tableData" border
          style="width: 100%; text-align: center;">
          <el-table-column align="center" prop="hcmName" label="姓名" width="110">
          </el-table-column>
          <el-table-column prop="dateTime" align="center" label="合同到期日期" width="150">
          </el-table-column>
          <el-table-column align="center" prop="diffDate" label="剩余天数" width="94">
          </el-table-column>
        </el-table>
      </div>

export default {

  props: ['deptCode'],
  data() {
    return {
      tableDataList: [],
      tableData: [],
      finishedtext: "没有更多了",
      
      //分页数据
      finished: false,
      pageSize: 10,
      currentPage: 1,
      deptCode: this.deptCode,
      type: "1",
      dom: null,
      total: 0,
      loading: true


    }
  },

  watch: {
  用于监视  下拉框 选项 传过来的数据 首页默认显示的数据  如没有下拉筛选按  直接在本页面 进行加载数据
    deptCode: {
      async handler(n) {

        this.currentPage = 1
        this.$refs.table.bodyWrapper.scrollTop = 0
        getExpireShow({
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          type: this.type,
          deptCode: this.deptCode,

        }).then(res => {
          this.tableData= res.data.list
          this.totaldata = res.data.total
          this.loading = false
        })
      }
    }
  },






  created() {
   获取传过来的 code
    // console.log("获取code-----------", this.deptCode)
  },

  mounted() {
    getExpireShow({
    //传递过来的参数
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      type: this.type,
      deptCode: this.deptCode,
    }).then(res => {
      this.tableData = res.data.list
      this.total = res.data.total
      this.loading = false
    })
    this.$nextTick(() => {
      console.log(this.$refs.table.bodyWrapper);
      this.dom = this.$refs.table.bodyWrapper
      this.dom.addEventListener('scroll', () => {
        // 表格滚动条滚动的距离
        let scrollTop = this.dom.scrollTop
        // 变量windowHeight是可视区的⾼度
        // let windowHeight = this.dom.clientHeight
        // 变量scrollHeight是滚动条的总⾼度
        let scrollHeight = this.dom.scrollHeight
        let clientHeight = this.dom.clientHeight
        let scrollBottom = scrollHeight - scrollTop - clientHeight
        console.log(scrollBottom);
        if (scrollBottom <= 1) {      // 这里就是滚动条滚动到底部的时候
          // 获取到的不是全部数据当滚动到底部继续获取新的数据

          // 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
          if (this.total <= this.tableData.length) {
            if (this.total <= this.pageSize) {
              Toast('已经到底啦！')
              return
            }
            Toast('已经到底啦！')
            return
          }  // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
          this.loading = true  // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃
          this.dom.scrollTop = this.dom.scrollTop - 30
          this.pageNum++
          getExpireShow({
            pageSize: this.pageSize,
            currentPage: this.currentPage,
            type: this.type,
            deptCode: this.deptCode,

          }).then(res => {
            // this.edit=res.data.edit
            // // this.$forceUpdate()
            // this.total=res.data.total
            for (var i = 0; i < res.data.list.length; i++) {
              this.tableData.push(res.data.list[i])
            }
          })
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      })
    })
  },
}

ref=“table” 用于监视 滚动的高度
this.$refs.table.bodyWrapper.scrollTop = 0