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>

Mian容器中Page分頁相关推荐

ASP.NET MVC 5 實作 GridView 分頁
本文用 ASP.NET MVC 5 實作一個 GridView,功能包括: 分頁(paging).關鍵字過濾(filtering).排序(sorting).AJAX 非同步執行,外觀上亦支援 Resp ...
改善DataGrid的默認分頁使其更友好
DataGrid是.net平台下開發Web應用程序最常用的控件,使用該控件可以幫助您專注與商務邏輯的開發,數據的顯示交給它來處理就好了,隻要簡單的設置一些相關的屬性,一張漂亮的表格就出來了,同時,它提 ...
CakePHP Pagination (分頁功能) 加入自己的參數
如果還不知道什麼是 Pagination 或者還不了解如何使用,請參考: CakePHP Pagination (分頁功能) . 通常在管理後台實作時,常設定許多查詢條件來查詢資料,比如:起始.結束時 ...
如何在C ++中从容器中删除元素
How to remove elements from container is a common C++ interview question, so you can earn some brown ...
docker查看现有容器_如何使用Docker将现有应用程序推送到容器中
docker查看现有容器 by Daniel Newton 丹尼尔·牛顿如何使用Docker将现有应用程序推送到容器中 (How to shove an existing application i ...
新浪微博开放平台API中page参数的使用方法
新浪微博开放平台API中page参数的使用方法在做项目的时候,有时候要调用新浪微博开放平台的API.说实话,新浪微博的API功能很强大,但是API文档写的不是很清楚. 我在做项目的时候,调用了很多A ...
Spring容器中Bean的作用域
当通过Spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleton:单例模式,在整个Spring I ...
mysql ef 随机排序_EFCore+Mysql倉儲層建設(分頁、多字段排序、部分字段更新)
前沿園子里已有挺多博文介紹了EFCore+Mysql/MSSql如何進行使用,但實際開發不會把EF層放在Web層混合起來,需要多個項目配合結構清晰的進行分層工作,本文根據個人實踐經驗總結將各個項目進 ...
焊接标注lisp文件下载_压力容器中焊缝的标注与对接，绝对专业
1. 概述在化工.食品及制药等领域的一些企业里,根据生产的需要都会使用压力容器.压力容器属于我国特殊设备,因为它关系到生产及使用安全这一重大问题,所以在生产制造过程中有严格的规定. 从压力容器容积来 ...
【学习笔记】Docker - 02. 在容器中运行软件(上)
2.1 控制容器: 构建一个网站监视器需求: 客户想让你做一个网站, 这个网站需要被紧密的监视, 如果服务器宕机了, 那么它们的团队会收到相关的邮件. 这里用到了3个容器. 第一个运行NGINX; ...

Mian容器中Page分頁

Mian容器中Page分頁相关推荐

最新文章

热门文章