2. 程式人生 > >Vue element 分頁

Vue element 分頁

阿新 • • 發佈：2019-01-03

Vue單頁面，有一個帶分頁的表格，表格內資料關聯頁碼，套路如下：

程式碼如下：

          <div class="c-table-list auth-list m-bottom-20">
              <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop:'value4',order:'descending'}" stripe> <el-table-column label="序號" width="100" align="left" type="index"></el-table-column> <el-table-column label="中文名稱" align="left" prop="value1"></el-table-column> <el-table-column label="登入名" align="left" prop="value2"></el-table-column> <el-table-column label="狀態" align="left" prop="value3"></el-table-column> <el-table-column label="註冊時間" align="left" prop="value4" sortable></el-table-column> <el-table-column label="性別" align="left" prop="value5"></el-table-column> <el-table-column label="部門" align="left" prop="value6"></el-table-column> <el-table-column label="崗位" align="left" prop="value7"></el-table-column> <el-table-column label="操作" align="left"> <template slot-scope="scope"> <div> <a @click="onSubmit" class="show-underline a-click" href="#">檢視</a> <a @click="onSubmit" class="show-underline a-click" href="#">編輯</a> <a @click="onSubmit" class="show-underline a-click" href="#">刪除</a> </div> </template> </el-table-column> </el-table> </div> <div class="t-right"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" prev-text="上一頁" next-text="下一頁" :total="tableData.length"> </el-pagination> </div>

該方法是每頁顯示多少資料的擷取方法 :data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"；

以下是script內程式碼：

export default {
    data () {
        return {
            currentPage: 1, pagesize: 5, formInline: { user: '', region: '' }, tableData: [ { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:15', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:16', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:17', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:18', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:19', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:26', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:36', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:46', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:66', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:31:16', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:31:16', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' } ] }; }, methods: { onSubmit () { alert('Have not been done!'); }, handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; } } };

效果如圖：

   

Vue單頁面，有一個帶分頁的表格，表格內資料關聯頁碼，套路如下：

程式碼如下：

          <div class="c-table-list auth-list m-bottom-20">
              <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop:'value4',order:'descending'}" stripe> <el-table-column label="序號" width="100" align="left" type="index"></el-table-column> <el-table-column label="中文名稱" align="left" prop="value1"></el-table-column> <el-table-column label="登入名" align="left" prop="value2"></el-table-column> <el-table-column label="狀態" align="left" prop="value3"></el-table-column> <el-table-column label="註冊時間" align="left" prop="value4" sortable></el-table-column> <el-table-column label="性別" align="left" prop="value5"></el-table-column> <el-table-column label="部門" align="left" prop="value6"></el-table-column> <el-table-column label="崗位" align="left" prop="value7"></el-table-column> <el-table-column label="操作" align="left"> <template slot-scope="scope"> <div> <a @click="onSubmit" class="show-underline a-click" href="#">檢視</a> <a @click="onSubmit" class="show-underline a-click" href="#">編輯</a> <a @click="onSubmit" class="show-underline a-click" href="#">刪除</a> </div> </template> </el-table-column> </el-table> </div> <div class="t-right"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" prev-text="上一頁" next-text="下一頁" :total="tableData.length"> </el-pagination> </div>

該方法是每頁顯示多少資料的擷取方法 :data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"；

以下是script內程式碼：

export default {
    data () {
        return {
            currentPage: 1, pagesize: 5, formInline: { user: '', region: '' }, tableData: [ { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:15', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:16', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:17', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:18', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:19', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:26', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '光電纜政治工區域', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:36', value5: '男', value6: '黃石通訊車間', value7: '主任' }, { value1: '趙永銘', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:46', value5: '女', value6: '漢口動車組無線檢修工區', value7: '副主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:30:66', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:31:16', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' }, { value1: '漢口動車組無線檢修工區', value2: 'wertyukjhg', value3: '啟用', value4: '2018-05-03 09:31:16', value5: '男', value6: '漢口動車組無線檢修工區', value7: '車間主任' } ] }; }, methods: { onSubmit () { alert('Have not been done!'); }, handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; } } };

效果如圖：

相關推薦

vue-element分頁

<template> <card-layout :title="L('Users')" :actions="actions" @click="handleClick"> <el-table :data="tableData4.slice((currentPage

vue+element分頁和後臺連結

// 分頁------------------------ handleCurrentChange(val) { //表格中的資料 this.axios .get(`/schools/mapping/list`,{ params: {

Vue element 分頁

Vue單頁面，有一個帶分頁的表格，表格內資料關聯頁碼，套路如下： 程式碼如下： <div class="c-table-list auth-list m-bottom-20"> <el-table :data="tableData

vue實現分頁器(仿element)

computed:{ // 中間頁陣列 $pages(){ const foldPage = this.foldPage const current = Number(this.current) con

vue實現分頁組件

one span his round target none tar ron gin 創建pagination.vue /* * 所需參數 * total Number 總頁數 * current Number 當前頁面下標 * pageSize Num

實現基於vue的分頁器外掛，各個功能都可以自己配置，樣式可以隨心所欲更改

首先展示一下效果（不會做gif 尷尬）      思路，第一步ul li 前面一個上一頁按鈕後面一個下一頁按鈕 <ul class="pagenation"> <li class="page_first"&

element分頁例子

程式碼 <div class="fenye"> <el-pagination @current-change="current_change" :page="page" :page-size="pagesize" layout="prev,

VUE+elementUI分頁

<el-col :span="24" class="toolbar pageBar"> <el-pagination @size-change="handleSizeC

vue.js 分頁查詢例項

url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAV8AAsAAAAACBwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAA

vue 前端實現 無重新整理式增 刪 改 查 以及 vue實現分頁

<div class="row" id="app"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_t

vue中使用element元件的Layout佈局和Button按鈕實現分頁

1.安裝elementUI：npm i element-ui -S 2.引入elementUI元件（main.js檔案中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

laravel+vue+element-UI模糊查詢和分頁

laravel+vue+element進行不重新整理查詢和分頁 <el-select v-model="search.site_node_id" filterable placeholder="請選擇"> <el-option

vue + element-ui的分頁問題

背景介紹 最近比較空閒，公司的後臺就想著把現在的後臺管理系統給改版一下，說是以前的太難看了，用著也不好用，然後給我甩過來一個ant-design-pro的連結，說是他看這個就挺不錯的。 我當時心裡就想著，之前的那個專案混合在你們的java專案裡，跟普通的jsp頁面差不多，一下就是一大堆的css和js檔案，

基於Vue與Element的千萬級大資料分頁

                        &nbs

vue element tablel分頁

說明： vue中引入element元件中 封裝 tabel表格，表格中包含查詢，分頁，全選 一，元件部分 <template> <div> <el-dialog :title="titleName"

通過後臺SQL獲取分頁資料，在使用VUE-Element-Table 表格選擇多行資料時，怎樣在

在專案中，分頁是由後臺SQL獲取。在table表格多選時，容易把選中的值傳給後臺，但是怎樣在返回上一頁時怎樣記住表格多選的資料？？ 當返回第二頁時，應該把第一條資料再選中，保持選擇狀態。 具體思路：在頁面不重新重新整理載入時，使用二維陣列儲存el-table表格多選結果。其中一維

通過後臺SQL獲取分頁數據，在使用VUE-Element-Table 表格選擇多行數據時，怎樣在

each onchange ati page tor emp 使用 返回上一頁 The 在項目中，分頁是由後臺SQL獲取。在table表格多選時，容易把選中的值傳給後臺，但是怎樣在返回上一頁時怎樣記住表格多選的數據？？ 當返回第二頁時，應該把第一條數據再選中

vue+element ui 分頁表格操作的坑

問題一：為實現分頁記憶選中項，但實際獲取資料後this.$refs.xxx.toggleRowSelection函式無效 【轉載】自“前端開發終生學習者”的《獲取資料後this.$refs.xxx.toggleRowSelection無效》 方法：獲取資料後在外部加上一個$nextTic

【git】--------------vue+element-ui實現分頁效果-------------【劉】

管理 nta git nat 。。 layout item spa style 當從後臺請求到大量數據的時候，並要在頁面展示出來，請求的數據可能上百條數據或者更多的時候，並不想在一個頁面展示，這就需要使用分頁功能來去完成了。 1.這次使用的是vue2.0+element-

三十九、vue中element最原始的分頁（未封裝的）

publish res and get EDA next handles 分頁 on() html<el-table ref="scoreUserTable" :data="scorePageUser.slice((currentPage1-1)*pageSize