<template>
  <div style="width: 100%">
    <el-table v-virtual-list="virtual" width="100%" height="600" :data="tableData.slice(start, over)">
      <el-table-column align="center" prop="date" label="日期" :height="virtual.itemHeight" min-width="180"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" :height="virtual.itemHeight" min-width="180"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" :height="virtual.itemHeight" min-width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
let timeout = null
export default {
  name: 'virtualTable',
  data() {
    return {
      tableData: [],
      virtual: {
        itemHeight: 40, // 每一項高度
        scrollClass: '.el-table__body-wrapper', // 有滾動條元素
        scrollTop: 0, // 滾動條距離頂部距離
        tableHeight: 0 // 可視區(qū)高度
      }
    }
  },
  computed: {
    // 起始下標
    start() {
      return Math.max(Math.ceil(this.virtual.scrollTop / this.virtual.itemHeight - 5), 0)
    },
    // 結束下標
    over() {
      return Math.min(
        Math.ceil((this.virtual.scrollTop + this.virtual.tableHeight + 1) / this.virtual.itemHeight + 5),
        this.tableData.length
      )
    },
    // 為了保持列表高度完整且滾動條能正常滾
    paddingAttr() {
      let bottom = (this.tableData.length - this.over) * this.virtual.itemHeight
      let top = this.start * this.virtual.itemHeight
      return `${top}px 0 ${bottom}px 0`
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let _arr = []
      for (let i = 1; i <= 100000; i++) {
        _arr.push({
          date: '2016-05-02',
          name: '王小虎' + i,
          address: `上海市普陀區(qū)金沙江路 ${i} 弄`
        })
      }
      this.tableData = _arr
      timeout = setTimeout(() => {
        const target = document.querySelector(this.virtual.scrollClass)
        this.virtual.tableHeight = target.clientHeight ?? 0
        this.setPaddingAttr(target)
      })
    },
    // 更新padding屬性
    setPaddingAttr(target) {
      let _table = target.querySelector('table')
      _table.style.padding = this.paddingAttr
    }
  },
  beforeDestroy() {
    clearTimeout(timeout)
  }
}
</script>

<style scoped>
::v-deep th,
::v-deep td {
  height: 40px;
  line-height: 40px;
  padding: 0;
}
</style>

// 虛擬列表自定義指令
Vue.directive('virtual-list', {
  bind(el, bind, vNode) {
    const that = vNode.context
    let virtual = bind.value
    if (virtual) {
      let target = el.querySelector(virtual.scrollClass)
      target.addEventListener('scroll', () => {
        // 更新滾動條位置
        that.virtual.scrollTop = target.scrollTop
        // 重新計算padding
        that.setPaddingAttr(target)
      })
    }
  }
})