vue3-mgt-template/src/views/template/layout/index.vue

<template>
    <Base-Container>
        <div class="flex">1</div>
        <pure-table
            class="base-main"
            :data="tableData"
            :columns="columns"
            size="large"
        />
        <div class="flex">2</div>
    </Base-Container>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
defineOptions({
    name: 'TemplateLayout',
});

const tableData = ref([
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
    {
        name: 'John',
        age: 25,
    },
    {
        name: 'Jane',
        age: 30,
    },
    {
        name: 'Bob',
        age: 28,
    },
]);

const columns = [
    {
        label: '姓名',
        prop: 'name',
    },
    {
        label: '年龄',
        prop: 'age',
    },
];
</script>

<style lang="scss" scoped></style>