element table表格的树形数据如何进行分页

这种格式的树形数据怎么进行分页

img


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hzb.aspx.cs" Inherits="QinStyle.AppWeb.ProjectModule.Hzb.Hzb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/Static/JS/elementui/index.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="../Sjym/js/vue.min.js"></script>
    <script src="/Static/JS/elementui/index.js"></script>
    <script src="../Sjym/js/jquery-1.11.3.min.js"></script>
    <script src="../../Static/JS/moment.min.js"></script>
    <%--<script src="../Sjym/js/vant.min.js"></script>--%>
</head>
<body>
    <div id="app">
        <div class="titleDiv">
            <div id="userformTitle">申能企业<span>{{year}}</span>年度技术改造/科技项目计划汇总表</div>
        </div>
        <div style="width:100%;height:60px;float:left;"> 
    <el-date-picker
      v-model="value3"
      type="year"
      placeholder="选择年">
    </el-date-picker>
            <el-button type="primary"  icon="el-icon-search" @click="button()"><span style="color:#ffffff">查询</span></el-button></div>
    <template>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="id"
                default-expand-all
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="Xh"
                    label="序号"
                    width="92">
                </el-table-column>
                <el-table-column
                    prop="Xmmc"
                    label="项目名称"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Lxyj"
                    label="立项依据"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Zynr"
                    label="主要内容"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Jhqzny"
                    label="计划起止年月"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Jhzfy"
                    label="计划总费用（万元）"
                     width="160">
                </el-table-column>
                <el-table-column
                    prop="Dnhtqdfy"
                    label="当年合同签订费用（万元）"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Xmfzr"
                    label="项目负责人"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Xmsx"
                    label="项目属性"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Xmjb"
                    label="项目级别"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="Bz"
                    label="备注"
                    width="160">
                </el-table-column>
            </el-table>
             <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="pageSizes"
             :page-size="PageSize" 
              layout="total, sizes, prev, pager, next, jumper"
             :total="totalCount">
       </el-pagination>
    </div>
        </div>
    </template>
</body>
    <script>
        var app = new Vue({
            el: "#app",
            mounted: function () {
            },
            data() {
                return {
                    value3: '',
                    tableData: [],
                    year: '',
                    currentPage: 1,
                    totalCount: '',
                    pageSizes: [1, 40, 60, 80,100,500],
                    PageSize: 1,
                }
            },
            methods: {
                handleSizeChange: function (val) {
                    this.PageSize = val;
                },
                handleCurrentChange: function (currentPage) {
                    this.currentPage = currentPage;

            },
        })
    </script>
</html>

回答：表格分页是对数据进行管理，你可以重写这个 handleSizeChange 和 handleCurrentChange 方法，然后通过Ajax从后端接口获取数据，然后赋值给表格里面的 tableData 属性，这样就可以了；
这里有一个差不多类型的给你做参考

<template>
    <!-- 文章类型管理 -->
    <el-card shadow="always" class="container-card">
        <div style="margin-bottom: 20px;">
            <el-button type="primary" @click="addTypeForm">新增</el-button>

            <el-input v-model="searchInput" placeholder="请输入文章类型名查询" 
                @input="search()" clearable style="width: 400px; displsy: flex; margin-left: 50px;">
            </el-input>

            <el-dialog title="添加文章类型" v-model="articleTypeForm.dialogFormVisible" width="40%">
                <el-form :model="articleTypeForm" label-width="140px">
                    <el-form-item label="文章类型名称">
                        <el-input v-model="articleTypeForm.type" class="userForm"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="articleTypeForm.dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="enSure">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>

        <el-table id="table"
            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" 
            :data="data.tableData" border stripe >
            <el-table-column prop="id" label="ID" sortable></el-table-column>
            <el-table-column prop="type" label="文章类型"> </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin: 10px 0;">
            <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :disabled="disabled"
                background 
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive, ref } from 'vue';
import { postRequest, deleteRequest, message } from '../utils/api'

export default {
    name: "ArticleTypeManage",
    setup() {
        function handleSizeChange(size) {
            pageSize.value = size;
            getPage();
        }
        function handleCurrentChange(cur) {
            currentPage.value = cur;
            getPage();
        }
        let searchInput = ref('')
        function search() {
            getPage()
        }

        let currentPage = ref(1)
        let pageSize = ref(10)
        let totalPage = ref(100)
        const disabled = ref(false)
        const data = reactive({
            tableData: []
        })
        function getPage() {
            postRequest('/articleType/getPage', {
                pageNum: currentPage.value,
                pageSize: pageSize.value,
                searchInput: searchInput.value,
            }).then(response=>{
                data.tableData = response.data.data.articleTypeList
                totalPage.value = response.data.data.total
            });
        }
        function handleDelete(row){
            deleteRequest('/articleType/delete', {
                type: row.type
            }).then(response=>{
                if(response.data.code == 200){
                    getPage()
                    message(response.data.msg, 'success')
                } else {
                    message(response.data.msg, 'error')
                }
            })
        }

        let articleTypeForm = reactive({
            type: '',
            dialogFormVisible: false
        })
        function addTypeForm() {
            articleTypeForm.dialogFormVisible = true;
        }
        function enSure(){
            postRequest('/articleType/add', articleTypeForm).then(response=>{
                if(response.data.code == 200){
                    getPage()
                    message(response.data.msg, 'success')
                } else {
                    message(response.data.msg, 'error')
                }
            })
            articleTypeForm.dialogFormVisible = false
        }

        onBeforeMount(() => {
            getPage()
        })

        return {
            handleSizeChange,
            handleCurrentChange,
            searchInput,
            search,
            currentPage,
            pageSize,
            totalPage,
            data,
            handleDelete,
            articleTypeForm,
            addTypeForm,
            enSure,
            disabled
        }
    }
};
</script>

<style scoped>
/* 文章类型管理内容容器 */
.container-card {
    width: calc(100% - 24px);
    margin: 10px 10px;
}

.userForm {
    width: 80%;
}
</style>