智一面gtalent-星之码前端开发框架vue系列教程--element表格数据懒加载

<template>

    <div id="app">

        <el-table

                :data="tableData"

                style="width: 100%"

                height="250"

                ref="myTable">

            <el-table-column

                    type="index"

                    width="50">

            </el-table-column>

            <el-table-column

                    prop="email"

                    label="邮箱">

            </el-table-column>

            <el-table-column

                    prop="name"

                    label="姓名">

            </el-table-column>

            <el-table-column

                    prop="address"

                    label="地址">

            </el-table-column>

        </el-table>

    </div>

</template>

<script>

    import jsonData from './../data/data.json'


    export default {

        name: 'Table',

        components: {},

        data() {

            return {

                tableData: [],

                currentPage: 1,

                pageSize: 10,

                totalPage: 0

            }

        },

        created() {

            this.totalPage = jsonData.length / this.pageSize

            this.loadData()

        },

        mounted() {

            this.tableListener()

        },

        methods: {

            loadData() {

                console.log('getData')

                //这里模拟请求数据，最后一页数据不够pageSize时有BUG，暂不处理

                let data = jsonData.splice((this.currentPage - 1) * this.pageSize, this.pageSize)

                this.tableData = this.tableData.concat(data);

                console.log("表格数据量：",this.tableData.length)

            },

            tableListener() {

                console.log("监听表格dom对象的滚动事件")

                let that = this;

                let dom = that.$refs.myTable.bodyWrapper

                dom.addEventListener("scroll", function () {

                    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;

                    // console.log("scroll", scrollDistance)

                    if (scrollDistance <= 0) {//等于0证明已经到底，可以请求接口

                        if (that.currentPage < that.totalPage) {//当前页数小于总页数就请求

                            that.currentPage++;//当前页数自增

                            //请求接口的代码

                            that.loadData()

                        }

                    }

                })

            }

        },

    }

</script>

data.json数据用 json-generator在线生成

[

  '{{repeat(5, 2000)}}',

  {

    _id: '{{objectId()}}',

    name: '{{firstName()}} {{surname()}}',

    email: '{{email()}}',

    address: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}'

  }

]

<template>

    <div id="app">

        <Table></Table>

    </div>

</template>


<script>

    import Table from './components/Table.vue'

    export default {

        name: 'App',

        components: {

            Table

        },

    }

</script>

-------------------------------------------------------------

智一面|前端模拟面试练习提升题