国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue使用Element-UI實(shí)現(xiàn)分頁效果

這篇具有很好參考價值的文章主要介紹了Vue使用Element-UI實(shí)現(xiàn)分頁效果。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

前言

分頁在展示數(shù)據(jù)列表的場景肯定是非常多的。

一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可。

但是前端也是可以不需要借助后端,自己也是可以處理分頁的。今天我這個后端開發(fā)就站在前端的角度上,處理列表分頁。

友情提示:

數(shù)據(jù)量大的情況下一定要后端處理分頁,前端雖然可以實(shí)現(xiàn),但是僅限數(shù)據(jù)量不是特別大的情況下!

先給大家看下我的列表,一個特別單純的列表,只是返回一個用戶列表,并且根據(jù)id倒敘排序。

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

給大家調(diào)用看下吧,一個很簡單的結(jié)構(gòu):

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

技術(shù)選項(xiàng):Pagination

這里我選擇使用的是element-ui的分頁:Pagination

它是ElementUI下的一個組件:

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

它的參數(shù)特別重要,我們就是借助這些參數(shù)實(shí)現(xiàn)的分頁

以下案例我只是挑選個別參數(shù),更多參數(shù)使用說明相間文檔

文檔:ElementUI-Pagination 分頁

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

大家根據(jù)自己的需求挑選一款即可,挑選不出來心儀可以參考我這一套,我也是精心挑選并且測試了很多參數(shù)。

增加分頁代碼

把這一塊加到頁面上,就有一個視覺上的分頁效果了。

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

相關(guān)代碼:

 <!-- 分頁 -->
    <!-- 
        @size-change //  pageSize 改變時會觸發(fā) 每頁條數(shù)
        @current-change //  currentPage 改變時會觸發(fā) 當(dāng)前頁
        :current-page //  默認(rèn)false
        background//  是否為分頁按鈕添加背景色
        :page-sizes // 每頁顯示個數(shù)選擇器的選項(xiàng)設(shè)置 這是下拉框可以選擇的,每選擇一行,要展示多少內(nèi)容 類似:[10, 20, 30, 40, 50, 100]
        page-sizes=顯示當(dāng)前行的條數(shù)
        layout // 組件布局,子組件名用逗號分隔
       :total // 總條目數(shù),一般從展示列表的總數(shù)獲取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>

注意代碼位置,我是把分頁放在table下面了:

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

初始化數(shù)據(jù)

緊接著還要定義默認(rèn)頁和默認(rèn)每頁條數(shù),以及數(shù)據(jù)列表

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

userTableData我是用過接口返回值賦值的。

  data() {
    return {
      userTableData: [], // 用戶列表
      currentPage:1, // 初始頁
      pagesize:10,  // 初始每頁的數(shù)據(jù)
    };
  },

回調(diào)函數(shù)

然后就是對分頁改變做出的回調(diào)函數(shù):

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

邏輯寫死即可,函數(shù)名需要和上面保持一致,通常直接復(fù)制即可。

 // 初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每頁下拉顯示數(shù)據(jù)
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //點(diǎn)擊第幾頁
        },

到了這里你就可以看到列表分頁了,但是會發(fā)現(xiàn)實(shí)際展示的數(shù)據(jù)和分頁展示的不一致,不要著急,就差最后一步了 !

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

指定table分頁

出現(xiàn)上面這種情況,是因?yàn)榱斜淼膁ata沒有適配分頁屬性:

你現(xiàn)在的代碼肯定是這樣的:

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

最后一步,給要展示的table指定分頁以及條件。

一行代碼:

 :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

查看效果

這樣就一個由前端代碼實(shí)現(xiàn)的分頁就完成了。我們檢測下吧

初始化頁面

因?yàn)槲夷J(rèn)展示的就是第一頁,并且每頁展示10條嘛,所以就是這樣的:
vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

切換每頁條數(shù):

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

vue elementui 分頁,ui組件庫,Vue,vue.js,ui,前端

大概就是這樣的,大家下去自己研究玩吧。

以下為我這個組件的全部代碼,大家靈活cv即可:

<template>
  <div>
      <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 數(shù)據(jù)管理</el-breadcrumb-item>
            <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
        </el-breadcrumb> -->
    <el-button type="primary" icon="el-icon-circle-plus" >新增用戶</el-button>
    <!-- 用戶列表 -->
    <!-- 
      data 顯示的數(shù)據(jù)   這里增加了分頁功能
      highlight-current-row 是否要高亮當(dāng)前行 默認(rèn)false
      border 是否帶有縱向邊框 默認(rèn)false
      stripe 是否為斑馬紋 默認(rèn)false
      fit 列的寬度是否自撐開	默認(rèn)true
      cell-style 通過回調(diào)函數(shù)邏輯操作增加style樣式
     -->
    <el-table 
      :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
      highlight-current-row 
      border 
      stripe
      fit 
      :cell-style="cellStyle"  >
    <!-- 自定義索引 --> 
      <el-table-column label="序號" type="index" width="50" align="center" :index="indexMethod"></el-table-column>
      <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->
      <!-- 用戶名 -->
      <!-- 
        prop  字段值
        label 字段名稱
        width 寬度
        align 是否劇中
       -->
      <el-table-column prop="userName" label="姓名"  width="80" align="center" ></el-table-column>
      <!-- 性別 01-->
      <el-table-column label="性別" width="50" align="center" prop="sex" heign>
        <template slot-scope="scope">
          <!-- scope.row就是這一行的全部數(shù)據(jù) 動態(tài)判斷性別字典 -->
          {{ scope.row.sex === 0 ? "女" : "男"}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="account" label="賬號"  width="150" align="center"></el-table-column>
      <el-table-column prop="password" label="密碼" width="100" align="center"></el-table-column> -->
       <!-- 頭像 -->
      <el-table-column prop="imnage" label="頭像" width="90"  align="center"></el-table-column>
      <!-- 手機(jī)號 -->
      <el-table-column prop="phone" label="手機(jī)號" width="150" align="center">
        <!-- 給內(nèi)容增加一個icon圖標(biāo) -->
        <template slot-scope="scope">    
            <i class="el-icon-phone"></i>
            <span style="margin-left: 10px">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <!-- 備注 -->
      <el-table-column prop="remark" label="備注" width="190" align="center"></el-table-column>
      <!-- 賬號狀態(tài) -->
      <el-table-column label="賬號狀態(tài)" width="80" align="center" prop="status">
        <template slot-scope="scope">
          {{scope.row.status === 0 ? "正常" : "禁用"}}
        </template>
      </el-table-column>
      <!-- 生日 -->
      <el-table-column   prop="birthday" label="生日" width="200" align="center" sortable>
       <template slot-scope="scope">    
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{scope.row.birthday}}</span>
      </template>
      </el-table-column>
      <!-- 操作列  -->
      <!-- fixed 列是否固定在左側(cè)或者右側(cè),true 表示固定在左側(cè)  可選:true, left, right -->
    <el-table-column fixed="right"  label="操作"  width="220" align="center" >
      <template slot-scope="scope"> 
        <!--
           scope.row就是這一行的數(shù)據(jù)  
           size 尺寸 medium / small / mini
           type 類型 	primary / success / warning / danger / info / text
           icon 圖標(biāo)類名
        -->
        <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete"  size="small" >刪除</el-button>
        <el-button type="warning" icon="el-icon-edit" size="small">編輯</el-button>
      </template>
    </el-table-column>

      <!-- <el-table-column
      prop="createTime"
      label="創(chuàng)建時間"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="updateTime"
      label="修改時間"
      width="180"
    ></el-table-column> -->
    </el-table>
    <!-- 分頁 -->
    <!-- 
        @size-change //  pageSize 改變時會觸發(fā) 每頁條數(shù)
        @current-change //  currentPage 改變時會觸發(fā) 當(dāng)前頁
        :current-page //  默認(rèn)false
        background//  是否為分頁按鈕添加背景色
        :page-sizes // 每頁顯示個數(shù)選擇器的選項(xiàng)設(shè)置 這是下拉框可以選擇的,每選擇一行,要展示多少內(nèi)容 類似:[10, 20, 30, 40, 50, 100]
        page-sizes=顯示當(dāng)前行的條數(shù)
        layout // 組件布局,子組件名用逗號分隔
       :total // 總條目數(shù),一般從展示列表的總數(shù)獲取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      userTableData: [], // 用戶列表
      currentPage:1, // 初始頁
      pagesize:10,  // 初始每頁的數(shù)據(jù)
    };
  },
  methods: {
        // 初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每頁下拉顯示數(shù)據(jù)
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //點(diǎn)擊第幾頁
        },
    //改變表格某一列或者某一個單元格文本顏色 
    cellStyle({row, column, rowIndex, columnIndex}) {
      // 定義樣式變量
      let cellStyle;
      // 根據(jù)每一行的status屬性的值進(jìn)行判斷
      // 如果是正常就展示以綠色字體展示,如果是禁用就以紅色顏色展示
      switch(row.status) {
        // 0代表正常
          case 0:
            // 設(shè)置文本顏色 綠色 可以直接寫顏色編碼,也可以直接寫顏色的單詞
            cellStyle = 'color:#70DB93';
            break;
            // 0代表金禁用
          case 1:
            // 設(shè)置文本顏色 紅色
            cellStyle = 'color:red';
            break;
            // 如果有其他狀態(tài),就默認(rèn)顯示,不給文本顏色
          default:
          cellStyle = '';
      }
        
        //return cellStyle  // 返回最終處理過的樣式 這樣寫就是讓全部行被style修飾
        // 返回最終處理過的樣式 只讓賬號狀態(tài)這個屬性的屬性被style修飾
         if(column.label == '賬號狀態(tài)'){
          return cellStyle
        }
    },
    // 展示用戶列表      
    queryUserList() {
       axios.get('http://localhost:9090/user/queryList', {
          // 傳遞的參數(shù)
          params: {
          
          }
          // 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
          }).then(res =>{
            // 請求成功后的數(shù)據(jù)返回給用戶列表用于展示
             this.userTableData = res.data.data;
          }).catch(error =>{
             console.log(error)
          })
    },
    // 序列自增
    indexMethod(index) {
      // 每次自增1 可靈活修改
      return (index += 1);
    },
    // 刪除
    handleDelete(row) {
        // 確認(rèn)框確認(rèn)是否要刪除
        this.$confirm("確定要刪除"+row.userName+"嗎?", "刪除提示", {
          iconClass: "el-icon-question", //自定義圖標(biāo)樣式
          confirmButtonText: "殘忍刪除", //確認(rèn)按鈕文字
          cancelButtonText: "留你小命", //取消按鈕文字
          showClose: true, //是否顯示右上角關(guān)閉按鈕  默認(rèn)false
          type: "warning", //提示類型  success/info/warning/error
          //center:"true", //文字居中 默認(rèn)false
      }).then(res=> {  //選擇確認(rèn)按鈕進(jìn)入此方法
          //確認(rèn)操作 請求刪除接口
         axios.get('http://localhost:9090/user/delete', {
          // 傳遞的參數(shù)
          params: {
            id:row.id //id,從row獲取當(dāng)前行的用戶id
          }
          // 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
          }).then(res =>{
              // 刪除成功
              if(res.data.status===200){
                // 刪除成功提示
                this.$message({showClose: true, message: '刪除成功!',type: 'success', duration:1000,center:true});
                // 重新刷新最新的用戶列表
                this.queryUserList();
              }
             
          }).catch(error =>{
             console.log(error)
          })
      }).catch(() => { //選擇取消按鈕進(jìn)入此方法
        //取消操作
      });    
    }
    // 打開新增用戶的彈窗
      //  open() {
      //   this.$alert('這是一段內(nèi)容', '標(biāo)題名稱', {
      //     confirmButtonText: '確定',
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         message: `action: ${ action }`
      //       });
      //     }
      //   });
      // },
  },
  mounted() {
    // 頁面加載就渲染用戶列表
    this.queryUserList();
  },
};
</script>

<style  >
</style>



總結(jié)

感覺elementui對分頁組件做的特別好。使用起來也特別簡單,這樣我不管從前后端哪個維度,都可以實(shí)現(xiàn)分頁了,又多學(xué)了一個技能,如果這篇文章對你有用,那就是對我最大的支持!文章來源地址http://www.zghlxwxcb.cn/news/detail-782639.html

到了這里,關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁效果的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 在vue項(xiàng)目里,Element-Ui中el-form 實(shí)現(xiàn)一行兩個表單效果

    在vue項(xiàng)目里,Element-Ui中el-form 實(shí)現(xiàn)一行兩個表單效果

    1.首先使用elementUi中的Layout 24分欄進(jìn)行布局,將整個form表單放入24分欄里 如圖所示: 2.再將需要同行顯示的表單放入el-row中的el-col中去 3.然后再根據(jù)你的需求控制一下表單大小就ok啦? 全部代碼: 效果圖如下: ?

    2024年02月11日
    瀏覽(32)
  • vue element-ui分頁插件 始終保持在頁面底部樣式

    vue element-ui分頁插件 始終保持在頁面底部樣式

    最近在寫前端頁面的時候,有一個小需求就是保證分頁插件一直保持在底部,表單數(shù)據(jù)增多的時候出現(xiàn)豎向的滾動條。 直接上代碼 樣式 效果展示

    2024年02月11日
    瀏覽(20)
  • Vue3+element-ui + TS封裝全局分頁組件

    本文介紹了如何使用Vue3、element-ui和TypeScript封裝一個全局分頁組件。 在開始之前,你需要安裝以下環(huán)境: Vue3 element-ui TypeScript 這個分頁組件提供以下功能: 支持自定義每頁顯示條數(shù) 支持自定義跳轉(zhuǎn)到指定頁碼 支持顯示總頁數(shù)和總條數(shù) 支持自定義樣式 分頁組件結(jié)構(gòu) 分頁組

    2024年02月12日
    瀏覽(24)
  • 【Vue Element-ui el-table組件 實(shí)現(xiàn)跨分頁全選 可全選中當(dāng)前頁 也可選中全量數(shù)據(jù)】

    前端模擬數(shù)據(jù)示例,無需后臺接口,復(fù)制粘貼即可看到效果。 element-ui table里的全選功能只會全選當(dāng)前頁的所有數(shù)據(jù) 當(dāng)table有分頁功能的時候?qū)崿F(xiàn)跨頁全選 ①為table添加select方法(當(dāng)用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件) 兩個參數(shù) selection,row 選中的數(shù)據(jù) 最后一個選中

    2024年02月02日
    瀏覽(46)
  • 【vue組件】使用element-ui 實(shí)現(xiàn)三級聯(lián)動下拉選擇

    【vue組件】使用element-ui 實(shí)現(xiàn)三級聯(lián)動下拉選擇

    實(shí)現(xiàn)的思路是第一個下拉選擇在選擇了選項(xiàng)后將該選項(xiàng)的信息傳遞到接口請求下一個選項(xiàng)的內(nèi)容,依次類推 然后在清除了上一級選擇的選項(xiàng)后要將其次級和子孫級的選項(xiàng)都清除(包括選擇里的列表內(nèi)容) 下面看具體代碼: 效果圖:

    2024年02月11日
    瀏覽(36)
  • vue使用element-ui 實(shí)現(xiàn)多套自定義主題快速切換

    vue使用element-ui 實(shí)現(xiàn)多套自定義主題快速切換

    下載到本地項(xiàng)目文件 配置所需主題樣式文件和className,例如上面代碼:theme-black、theme-blue… 在根目錄執(zhí)行以下命令:

    2024年02月11日
    瀏覽(24)
  • Vue.js 中使用 Element UI 實(shí)現(xiàn)異步加載分頁列表

    Vue.js 中使用 Element UI 實(shí)現(xiàn)異步加載分頁列表

    在前端開發(fā)中,我們常常需要展示大量數(shù)據(jù),并提供分頁瀏覽的功能。本篇博客將介紹如何使用 Vue.js 和 Element UI 組件庫創(chuàng)建一個簡單的異步加載分頁列表。 Vue.js Element UI JavaScript 我們將創(chuàng)建一個包含表格和分頁組件的 Vue 單文件組件。以下是組件的基本結(jié)構(gòu): 引入 Element U

    2024年02月04日
    瀏覽(33)
  • vue如何讓element-ui的table列表中展示多張圖片(可放大)的效果?

    vue如何讓element-ui的table列表中展示多張圖片(可放大)的效果?

    ? 效果圖基本就是這樣,如果需要此效果的小伙伴可以往下看 ; 1、先簡單的復(fù)述一下原理 ????????? 因?yàn)橐粋€table表格里面要存放一張或多張圖片,所以前端接受到圖片相關(guān)的數(shù)據(jù)肯定是個數(shù)組類型的,所以此時就要用到 v-for=\\\"(item,index) in xxx\\\" :key=\\\"index\\\" 的方法來實(shí)現(xiàn),說

    2024年02月11日
    瀏覽(26)
  • vue+element-ui 實(shí)現(xiàn)下拉框滾動加載

    vue+element-ui 實(shí)現(xiàn)下拉框滾動加載

    該功能是由 自定義滾動指令 結(jié)合下拉框 :remote-method 遠(yuǎn)程搜索 實(shí)現(xiàn)的 開啟遠(yuǎn)程搜索 參考官方文檔 綁定自定義指令 v-el-select-loadmore=“l(fā)oadmore”

    2024年02月14日
    瀏覽(98)
  • Vue2 +Element-ui實(shí)現(xiàn)前端頁面

    Vue2 +Element-ui實(shí)現(xiàn)前端頁面

    以一個簡單的前端頁面為例。主要是利用vue和element-ui實(shí)現(xiàn)。 里面涉及的主要包括:新建vue項(xiàng)目、一行多個輸入框、頁面實(shí)現(xiàn)等。 ? ①首先安裝nodejs,這部分在此就不講啦。 ②然后安裝vue-cli: 查看是否安裝成功: 安裝成功之后就輸出vue的版本 ③在cmd窗口新建一個vue2腳手架

    2024年02月16日
    瀏覽(33)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包