2024-06-05 vue element 表格滑动加载

<el-table
      v-loadmore="getNewData"
      v-loading="loadingData"
      :data="tableData"
      style="width: 100%"
      max-height="800">
      <el-table-column
        v-for="(item, index) in columns" :key="item.Id"
        :fixed="index === 0 ? 'left' : false"
        :prop="item.prop" :label="item.name">
      </el-table-column>
    </el-table>

element中 table表格数据滑动加载
// 自定义局部指令
    directives: {
      loadmore: {
        // 指令的定义
        bind(el, binding, vnode) {
          const selectWrap = el.querySelector('.el-table__body-wrapper')
          selectWrap.addEventListener('scroll', function() {
            const sign = 100
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
              binding.value()
              // console.log('距离底部小于100了')
              // console.log(vnode.context)
              // // 指令中不能用this关键字
              // vnode.context.getNewData()
            }
          })
        }
      }
    }

自定义指令中 v-loadmore = 'getNewData'

getNewData() {
        if (this.flag === true) {
          this.flag = false
          this.PageIndex++
          // this.loadingData = true
          this.getTableData(this.PageIndex, this.pageSize)
        }
      },
// 请求后台表格数据
getTableData(PageIndex, pageSize) {
        searchSalesDetail(Date.parse(this.formInline.startTime) / 1000, PageIndex, pageSize).then(res => {
          console.log(res)
          const columnsArr = []
          for (const i in res.columns[0]) {
            const obj = {}
            obj.prop = i
            obj.name = res.columns[0][i]
            columnsArr.push(obj)
          }
          this.columns = columnsArr
          this.tableData.push(...res.data)
          this.flag = true
          // this.tableData = res.data
          this.loadingData = false
        })
      },