el-table分页展示数据

一次请求将全部要展示的数据获取到，分页在前端对数据进行处理进行分页展示

<el-table
    :data="handleList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    :show-header="true"
    :height="$store.state.clientHeight - 134"
    :header-cell-style="tableHeaderStyle"
    style="width: 100%; overflow-y: auto;"
    >
    <el-table-column
        prop="index"
        label="序号"
        width="100"
        align="center">
    </el-table-column>
    <el-table-column
        prop="name"
        label="应用名称"
        align="center">
    </el-table-column>
    <el-table-column
        prop="person"
        label="操作人"
        align="center">
    </el-table-column>
    <el-table-column
        prop="time"
        label="操作时间"
        align="center"
        >
    </el-table-column>
    <el-table-column
        prop="type"
        label="操作类型"
        align="center">
    </el-table-column>
    <el-table-column
        prop="result"
        label="执行结果"
        align="center">
    </el-table-column>
</el-table>
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="handleList.length">
</el-pagination>

<script>
    export default({
        data() {
            return {
                handleList: [],
                // 当前页
                currentPage: 1,
                // 每页多少条
                pageSize: 10
            }
        },
        mounted() {
            this.$http.get('/json/handle.json')
                .then(({data}) => {
                    if (data.status === 200) {
                        this.handleList = data.data;
                    }else{
                        console.log('没有获取到数据')
                    }
                })
                .catch((err) => {
                    console.log('获取数据出错', err)
                });
        },
        methods: {
            // 每页多少条
            handleSizeChange(val) {
                this.pageSize = val;
            },
            // 当前页
            handleCurrentChange(val) {
                this.currentPage = val;
            }
        }
    })
</script>

结果：

第1页：

第2页：