Table的虚拟列表和无限滚动

Table的虚拟列表和无限滚动

一、使用自定义指令实现滚动到底部加载数据

在main.js中加入loadmore指令

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

实现

<template>
  <div>
      <el-table
            :data="tableData"
            border
            height="200px"
            v-loadmore="loadMore"
            style="width: 100%"
            >
            <el-table-column prop="index" label="序号" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        </el-table>
  </div>
</template>

<script>
// 通过指令的方法实现滚动加载v-loadmore="loadMore"
export default {
    name: "",
    data() {
        return {
            tableData: [],
            page: 1,
        }
    },
    created() {
        this.queryData(0);
    },
    methods: {
        loadMore() {
            setTimeout(() => {
                this.queryData(1);
            }, 1000);
        },
        queryData(i) {
            this.page++;
            const data = new Array(10).fill(0).map((_, index) => ({
                index: index,
                name: "sdaaas"+(index * this.page++)
            }))
            
            this.tableData = i ? this.tableData.concat(data) : data
        },
    }
}
</script>

二、使用ElementUI提供的无限加载滚动指令v-el-table-infinite-scroll

安装npm install el-table-infinite-scroll

若使用的是2.x的版本，则需另外安装npm install @vue/composition-api

<template>
  <div>
      <el-table
        :data="tableData"
        border
        height="200px"
        style="width: 100%"
        v-el-table-infinite-scroll="loadMore"
        >
        <el-table-column prop="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            tableData: [],
          	list:[],
            page: 1,
          	count: 0,
        }
    },
    created() {
        this.queryData();
    },
    methods: {
        loadMore() {
            this.count = this.count > this.page ? this.page : (this.count);
            this.tableData = this.tableData.concat(this.list.splice(this.count*20,(this.count*20)+20));
        },
        queryData() 		{
          axios.get('http://localhost:5000/getDataListStatic').then(res => {
                console.log('请求结果200条数据==', res);
                this.list = res.data;
                this.tableData = this.list.splice(0,20);
                this.page = Math.floor(this.list/20);
            })
        },
    }
}
</script>

三、第三方插件UMY

ElTable的虚拟列表封装。

官方文档http://www.umyui.com/umycomponent/installation/

安装npm install umy-ui

使用示例

<template>
   <div>
     <p style="margin: 20px 0;">
          <el-button @click="setHei(400)">设置高度为400</el-button>
          <el-button @click="setHei(600)">设置高度为600</el-button>
          <el-button @click="setHei(800)">设置高度为800</el-button>
          <el-button @click="pagingScrollTopLeft(2000)">滚动到2千位置</el-button>
          <el-button @click="pagingScrollTopLeft(5000)">滚动到5千位置</el-button>
          <el-button @click="pagingScrollTopLeft(0)">滚动到顶部</el-button>
          <el-button @click="scrollBottom">滚动到底部位置</el-button>
     </p>
     <u-table
          ref="plTable"
          :data="tableData"
          :height="height"
          use-virtual
          showBodyOverflow="title"
          showHeaderOverflow="title"
          :row-height="rowHeight"
          border>
          <u-table-column type="index" width="100" />
          <u-table-column
             v-for="item in columns"
             :key="item.id"
             :resizable="item.resizable"
             :show-overflow-tooltip="item.showOverflow"
             :prop="item.prop"
             :label="item.label"
             :fixed="item.fixed"
             :width="item.width"/>
         <u-table-column
               fixed
               label="操作"
               width="150">
               <template slot-scope="scope">
                 <span :key="scope.index">查看</span>
               </template>
             </u-table-column>
        </u-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            height: 0,
            rowHeight: 40,
            columns: Array.from({ length: 8 }, (_, idx) => ({
                prop: 'address', id: idx, label: '地址' + idx, width: 200
            })),
            tableData: Array.from({ length: 500 }, (_, idx) => ({
                id: idx + 1,
                date: '2016-05-03',
                name: 1,
                ab: '欢迎使用u-table',
                address: '北京市天安门'+idx
            }))
        }
    },
    mounted () {
        this.height = 500 // 动态设置高度
    },
    methods: {
        setHei (val) {
            this.height = val
        },
        scrollBottom () {
            this.$refs.plTable.scrollBottom()
        },
        pagingScrollTopLeft (val) {
            this.$refs.plTable.pagingScrollTopLeft(val, 0)
        },
    }
}
</script>
<style lang="less" scoped>
</style>