Element + vue 用分页优化dom渲染时长

场景：请求接口一次返回几百上千条数据，导致渲染dom时间太长，甚至浏览器卡死

这里前端用分页解决单次渲染dom节点过多的问题:

框架：Element + vue

//页面
//列表省略
<el-pagination
    @size-change="changePageSize"
    @current-change="changePageIndex"
    :current-page="page.currentPage"
    :page-sizes="[10, 20, 30, 40 , 50]"
    :page-size="page.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total"
></el-pagination>

//JS
export default {
    props: ["longList"]
    data(){
        return {
            lists: [],
            page: {
                pageSize: 10,//一页展示10条
                total: 0,//总数
                currentPage: 1//当前页
            },
        }
    },
    created() {
        this.setList()
    }
    methods: {
        changePageSize(val) {
            console.log(`每页 ${val} 条`);
            this.page.pageSize = val;
            this.setList();
        },
        changePageIndex(val) {
            console.log(`当前页: ${val}`);
            this.page.currentPage = val;
            this.setList();
        },
        //设置展示的列表数据
        setList() {
            this.lists = this.longList.slice((this.page.currentPage - 1) * this.page.pageSize, this.page.pageSize * this.page.currentPage)
            this.page.total = this.longList.length
        }
    }

}