繼續(xù)上一章節(jié)進(jìn)行講解

1、vue table的分頁模式

分頁界面實(shí)現(xiàn)效果圖如下

對應(yīng)代碼片段并針對代碼進(jìn)行說明

<Pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

v-show="total>0" //當(dāng)total大于0，組件才顯示

:total="total" //綁定變量，總記錄數(shù)

:page.sync="queryParams.pageNum" //顯示的第幾頁

:limit.sync="queryParams.pageSize" //每頁顯示的數(shù)量

@pagination="getList" //綁定的函數(shù)，點(diǎn)擊分頁后觸發(fā)的函數(shù)

2、若依分頁組件封裝

若依對分頁做成一個(gè)封裝組件，所以頁面直接引入就可以。在我們研讀代碼中，并沒有直接 import分頁組件的代碼，下面是原因。

作者在mian.js 通過下面兩行代碼直接引入作為全局組件，所以在局部的也沒就不需要重復(fù)

import

// 分頁組件import Pagination from "@/components/Pagination";Vue.component('Pagination', Pagination)

分頁組件代碼路徑/src/components/Pagination

props: { total: { required: true, type: Number }, page: { type: Number, default: 1 }, limit: { type: Number, default: 20 }, pageSizes: { type: Array, default() { return [10, 20, 30, 50] } }, // 移動(dòng)端頁碼按鈕的數(shù)量端默認(rèn)值5 pagerCount: { type: Number, default: document.body.clientWidth < 992 ? 5 : 7 }, layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }, background: { type: Boolean, default: true }, autoScroll: { type: Boolean, default: true }, hidden: { type: Boolean, default: false }},

分頁作為組件，需要外部傳入?yún)?shù)，其中組件里面props就是定義外部入?yún)ⅲ?total參數(shù)中的required是true，表示total是必傳，type是Number，表示total的數(shù)據(jù)類型是數(shù)字，如果傳入中文等會(huì)出現(xiàn)異常

封裝的分頁組件最終使用element ui 的分頁組件，具體組件連接參考https://element.eleme.cn/#/zh-CN/component/pagination#dai-you-bei-jing-se-de-fen-ye

<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

@size-change="handleSizeChange" 當(dāng)選擇的頁數(shù)改變，分頁組件會(huì)調(diào)用handleSizeChange函數(shù)，handleSizeChange函數(shù)具體實(shí)現(xiàn)如下

handleSizeChange(val) { if (this.currentPage * val > this.total) { this.currentPage = 1 } this.$emit('pagination', { page: this.currentPage, limit: val }) if (this.autoScroll) { scrollTo(0, 800) }},

其中this.$emit('pagination', { page: this.currentPage, limit: val })是回調(diào)父組件的pagination函數(shù)

<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

從index的分頁代碼可以看出分頁組件handleSizeChange會(huì)調(diào)用@pagination函數(shù)，index的pagination函數(shù)賦值是getList函數(shù)，所以最終執(zhí)行函數(shù)是getList

3、預(yù)覽界面

界面效果圖如下，彈出窗口，窗口包含幾個(gè)tab，實(shí)現(xiàn)的功能是可以進(jìn)行生成代碼結(jié)果進(jìn)行預(yù)覽

代碼實(shí)現(xiàn)如下

<!-- 預(yù)覽界面 --><el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar"> <el-tabs v-model="preview.activeName"> <el-tab-pane v-for="(value, key) in preview.data" :label="key.substring(key.lastIndexOf('/') 1,key.indexOf('.vm'))" :name="key.substring(key.lastIndexOf('/') 1,key.indexOf('.vm'))" :key="key" > <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float:right">復(fù)制</el-link> <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre> </el-tab-pane> </el-tabs></el-dialog>

下面對el-dialog和el-tabs標(biāo)簽進(jìn)行解說

適用場景

新增和編輯操作想要以彈框的方式顯示，使用到el-dialog

知識點(diǎn)

el-dialog的title屬性設(shè)置標(biāo)題

el-dialog的visible.sync屬性控制彈框的顯示

el-dialog的append-to-body屬性支持彈框中繼續(xù)打開彈框

el-dialog的before-close屬性關(guān)閉按鈕的鉤子

span的slot='footer'屬性彈框底部設(shè)置

el-dialog的center屬性標(biāo)題和底部居中顯示

官網(wǎng)地址：https://element.eleme.cn/#/zh-CN/component/dialog

適用場景

與導(dǎo)航欄相似，項(xiàng)目中常見的是點(diǎn)擊某個(gè)導(dǎo)航欄，主頁面（el-main）模塊的最上方會(huì)顯示我們的標(biāo)簽欄集合，點(diǎn)擊不同的導(dǎo)航欄，標(biāo)簽欄會(huì)在不斷追加，若點(diǎn)擊到標(biāo)簽集合中已存在，就進(jìn)入選中指定的標(biāo)簽欄，顯示頁面

知識點(diǎn)

el-tabs嵌套el-tab-pane使用

el-tabs的v-model對應(yīng)el-tab-pane的name

el-tabs的type可以指定為card,border-card

el-tab-pane的label為顯示的標(biāo)簽內(nèi)容，標(biāo)簽的內(nèi)容在首尾標(biāo)簽內(nèi)部

el-tabs可以設(shè)置closable,editable,addable,分別設(shè)置tab-remove,edit,tab-add動(dòng)態(tài)修改標(biāo)簽集合

還有tab-click鉤子

el-tabs中設(shè)置tab-position，修改標(biāo)簽位置，可以為top,bottom,left,right

官網(wǎng)地址：https://element.eleme.cn/#/zh-CN/component/tabs

4、未來計(jì)劃

1、ruoyi非分離版本拆解

2、ruoyi-vue-pro：講解工作流

3、ruoyi-vue-pro：支付模塊，電商模塊

4、基于ruoyi-vue-pro項(xiàng)目開發(fā)

5、JEECG低代碼開發(fā)平臺

請關(guān)注我，本星球會(huì)持續(xù)推出更多的開源項(xiàng)目代碼解析，如有更好的意見請留言回復(fù)或者私信