vxe-vxeTable表格基础运用(表格加分页跳转)

<template>
<div class="execls">
    <vxe-table 
        ref="xTable1" 
        show-overflow 
        row-id="id" 
        max-height="630" 
        :loading="loading" 
        :data="tableData"
        :row-config="{  isHover: true }" 
        :show-header-overflow="true"
        :column-config="{ resizable: true }"
        :header-cell-style="headerCellStyle">
        <vxe-column type="seq" align="center" width="10%"  title="序号"></vxe-column>
        <vxe-column field="demandName"  align="left"  width="30%" title="名称" :formatter="getConnect">
            <template #default="{ row }">
                <span class="click" @click="toDemandDetail(row)" style="color: #0a98d5; cursor: pointer">
                    {{ row.demandName }}
                </span>
            </template>
        </vxe-column>
        <vxe-column field="version" align="left"  width="20%" title="版本" :formatter="getConnect"></vxe-column>
        <vxe-column field="recipientName" align="left" width="20%" title="创建人" :formatter="getConnect"></vxe-column>
        <vxe-column field="createTime" align="left" width="20%" title="创建日期" :formatter="getConnect"></vxe-column>
    </vxe-table>
    <vxe-pager 
        border 
        :loading="loading" 
        :current-page="tablePage.pageNo" 
        :page-size="tablePage.pageSize"
        :total="tablePage.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange">
        <template #left>
            <vxe-button size="small" icon="vxe-icon-refresh" @click="refresh"></vxe-button>
        </template>
    </vxe-pager>
</div>
</template>
<script>
import RdmRequrementCreateApi from '@/api/rdm/rdmRequrementCreate';
export default {
    name: 'PdmPartsObjectViewerHistory',
    data() {
        return {
            loading: false,
            tableData: [],
            // 分页
            tablePage: {
                accepter: true,
                demandName: undefined,
                pageNo: 1,
                pageSize: 10,
                totalResult: 0,
                sortMap: {},
                type: -1
            },
        }
    },
    activated() {
        this.loadTableData()
    },
    methods: {
        // 分页
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.pageNo = currentPage
            this.tablePage.pageSize = pageSize
            this.loading = true
            this.loadTableData()
        },
        //请求响应
        loadTableData() {
            this.loading = true
            // 请求参数tablePage
            RdmRequrementCreateApi.createOrAccepterList(this.tablePage)
                // 响应参数res
                .then((res) => {
                    this.tableData = res.data.list
                    this.tablePage.totalResult = res.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 返回是否有值 
        getConnect({ cellValue }) {
            if (cellValue != null) {
                return cellValue
            } else {
                return '--'
            }
        },
        // 跳转
        toDemandDetail(row) {
            // row.version
            // // 对应的路径跳转
            // let path = '/demandMg/home/RequiredClear'
            // console.log(row);
            // this.$router.push({
            //     path,
            //     query: {
            //         version: row.version,
            //         demandId: row.id,
            //     },
            // })
        },
        refresh() {
            this.scrub();
        },
        // 刷新
        scrub() {
            this.tablePage.pageNo = 1
            this.tablePage.pageSize = 10
            this.tablePage.totalResult = 0
            this.tablePage.sortMap = {}
            this.loadTableData()
        },
        headerCellStyle() {
            return {
                backgroundColor: 'rgb(250,250,250)',
            }
        },
    },
}
</script>
<style scoped lang="less">
.execls{
    margin:30px 10px 0 10px;
}
/deep/.vxe-table--header {
    width: 100% !important;
}
/deep/.vxe-table--render-default .vxe-table--body,
.vxe-table--render-default .vxe-table--footer,
.vxe-table--render-default .vxe-table--header {
    width: 100% !important;
}
</style>
  

运行结果

简单vxe-table的表格添加分页，表格加分页跳转