Mian容器中Page分頁

Page分頁

<template>
<!-- ###增加接口  http/api.ts 
export const getList=(data:any)=>$http{url:"/getList",mothod:"get",data}
-->
<!-- interface
 -->
<div>
    <el-form :inline="true" :model="selectData.page" class="demo-form-inline">
        <el-form-item label="标题搜索">
            <el-input v-model="selectData.user" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
            <el-select v-model="selectData.region" placeholder="请输入关键字">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格製作 -->
    <div>
        <el-table border :data="list" style="width:100%">
            <el-table-column header-align="center" align="center" prop="id" label="ID">
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="title" label="標題">
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="body" label="詳情">
            </el-table-column>
        </el-table>
        <!-- 分頁組件 -->
        <el-pagination @current-change="currentChange" layout="prev, pager, next" :total="selectData.count">
        </el-pagination>
    </div>
</div>
</template>

<script setup>
/* lang=“ts” */
import {
    defineComponent,
    onMounted,
    reactive
} from 'vue';

import {
    getList
} from '../http/api'

export default defineComponent({
    name: 'OrderMain',
    setup() {
        const data = reactive({
            user: '',
            region: '',
        })

        onMounted(() => {
            getList({
                page: data.selectData.page
            }).then(res => {
                console.log(res);
                /* 改變 page頁碼*/
                data.selectData.count = res.data.length;
                silceList(res.data)
            })
        })

        const onSubmit = () => {
            console.log('submit!')
        }

        const silceList = (arr) => {
            for (let index = 0; index < arr.length; index += 10) {
                let list = arr.silce(index, index + 10);
                data.list.push(list)
            }
        }

        const currentChange = (page) => {
            data.selectData.page = page - 1
        }
    }
})
</script>

<style scoped>

</style>