微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
從本期開始知識點講以思維導圖的形式給出，內容點會按照講解-應用-展示的形式體現，這樣會更清晰些。
DBUntils連線池
在專案中連結資料是直接通過pymysql去做的連結請求關閉，每次操作都要獨立重複請求，其實是比較浪費資源，在併發不大的小專案雖然無感知，但如果有頻繁請求的專案中，就會有效能問題，那麼可以通過使用連線池技術，管理來進行優化，DBUnitls是一套Python的資料庫連線池包，對連結物件進行自動連結和釋放，提高高頻高併發下資料訪問效能，大概的原理如：
DBUntils 按照配置初始化多個數據庫連線儲存在連線池中
在程式建立連線的時候，從空閒的連線池中獲取，不需要重新初始化連線，提升連結速度；
在程式使用完畢後，把連線放回連線池，並不真正的關閉，等待其他請求使用，減少頻繁資料的開啟和關閉操作。
DBUntils 提供兩種方式，並都能自動管理
PersistentDB (persistent_db) 提供執行緒專用的連線
PooledDB (pooled_db) 提供執行緒間可共享的連線
官方 [註解-1] 給出的示意圖如下，僅夠參考下，不進行擴充套件
使用此功能需要安裝依賴
pip install DBUtils
一般比較常用就是共享的方式，以 pooled_db為例子，使用方法很簡單
import pymysql
from dbutils.pooled_db import PooledDB
# 初始化資料庫連線，使用pymysql連線，
pool = PooledDB(pymysql,3,host='',port='',user='',passwd='',database='') # 一般連線
db = pool.connection()
cur = db.cursor()
cur.execute(...)
res = cur.fetchone()
cur.close() # 關閉使用遊標
db.close() # 關閉使用連線 # 或者通過with方式
with pool.connection() as db:
with db.cursor as cur:
cur.execute(...)
res = cur.fetchone()
一些引數說明，上邊說明中第一引數為 creator 指定那種連線模式，第二引數為mincached
mincached ：啟動時開啟的空的連線數量
maxcached ：連線池最大可用連線數量
maxshared : 連線池最大可用共享連線數量
maxconnections : 最大允許連線數量
maxusage ：單個麗娜姐最大複用次數
blocking ：達到最大數量時是否阻塞
這裡只是對連線的管理，DBUntils的基本知識點講完了，關於效能對比可以網上搜索相關內容，另外其他的資料庫操作還按照自己使用方法進行操作即可。
SQL中limit用法
專案中對於較多的資料顯示，需要實現分頁資料查詢，這可以利用SQL語法關鍵詞 limit ，它可以限制查詢結果返回的數量，也可以指定起始索引，來完成分頁查詢效果，語法形式
# 基本用法
SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset
# 簡化形式
select * from tableName limit i,n
i：指定第一個返回記錄行的偏移量（可省略即表示從0開始）
n：第二個引數指定返回記錄行的最大數目
兩個示例如：
... limit 10 # 查詢前10條資料, 也可以表示為limit 0,10
... limit 10,15 # 從11條開始返回後15條資料 即11-25
這裡有個 注意事項，網上好多關於limit最後一個引數用 -1 可以表示，指定偏移量到最後，這個目前在新的MYSQL版本已經無效，會報語法錯誤，辦法是用個較大的數代替。
如何實現分頁查詢，通過觀察我們可以這樣，如果前端傳遞的page頁數（初始為1），每頁的數量為page_size，那麼第一個引數計算偏移量可設定為 (page-1) * page_size，第二引數表可設定為page_size， 例如 前端請求第一頁20個，則計算後後兩個引數為（ 0, 20），再如請求第2頁20個，則計算後兩個引數為 ( 20, 20 )，這樣就可以實現分頁資料查詢效果。
這個知識點最後，擴充套件一個小優化，如果是分頁資料特別，第一個引數偏移量太大的時候會帶來效能的問題，優化的方式是使用子查詢優化（前提條件是有自增ID的表），即先通過查詢偏移量ID，然後條件 “>=ID + limit 數量" 進行查詢
SELECT * FROM apps where id >=(SELECT id FROM apps LIMIT 100000,1) LIMIT 20
前端元件
分頁 Pagination
當資料量過多時，使用分頁分解資料。[註解-2]
基本樣式和用法
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
設定layout，表示需要顯示的內容，用逗號分隔，佈局元素會依次顯示。prev表示上一頁，next為下一頁，pager表示頁碼列表，除此以外還提供了->後的元素會靠右顯示，jumper表示跳頁元素，total表示總條目數，sizes表示每頁顯示條數，size用於設定每頁顯示的頁碼數量（預設10），通過pager-count屬性可以設定最大頁碼按鈕數（預設大於7頁的時候6頁後...縮略 ），使用了size-change和 current-change事件來處理頁碼大小和當前頁變動時候觸發的事件。
選擇器 Select
當選項過多時，使用下拉選單展示並選擇內容。[註解-3]
基本用法 ：<el-select>控制元件標記，v-model繫結資料，<el-option> 選項集。
<el-select v-model="value" placeholder="請選擇">
<el-option key="key1" label="選項1" :value="key1"/>
<el-option key="key2" label="選項2" :value="key2"/>
</el-select>
自定義用法：<span style="float: left/right">顯示自定義的左右內容
<el-select v-model="value" placeholder="請選擇">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
樣式如下，具體使用和其他樣式引數參考官方
以上是本章在實現“應用管理”模組顯示功能中新用到的兩個元件，對於要實現分頁，前端請求資料需要給 頁碼current-page和 頁數page_size ，後端資料還要返回一個總量total資料。
模糊查詢與分頁功能實現
通過上邊的新增知識點，下邊按照上一篇的產品需求和原型，進行實際的應用實現，這裡會給出實現步驟，可以嘗試利用上邊和以往的內容點，自己去實現，然後不會點再參考實際羅列的程式碼程式設計，還是那觀點，通過自己動手實踐出來的才印象
產品原型頁面
詳細需求參考歷史文章 【平臺規劃和需求分析】
功能實現（步驟）虛擬碼
根據需求羅列所需欄位建立 apps應用資料庫表，並插入一些測試資料大於10條以上；
後端建立一個配置檔案管理資料相關欄位資訊；
後端建立application.py 用來實現DBUntils連線和應用管理api；
介面返回的Response抽取出來定一個通用json格式返回；
GET 實現/api/application/product 歸屬分類（products表）查詢，只需要 ；id,keyCode,title 資料；
POST 實現/api/application/search 多關關鍵詞（apps表）查詢，同時要根據前端傳的分頁；和數量進行分頁查詢，並要返回個表總數；
前端menu選單實現新目錄結構
建立新的api請求，實現對後端提供的介面請求
前端查詢產品，並使用自定義展示資料，選擇資料後可清除，其他搜尋條件參照以往input用法；
使用Table元件繫結資料，使用Pagination 繫結分頁資料和實現切換時候動作方法，樣式使用帶背景，總數，數量選擇，頁碼，以及上、下頁切換。
實踐參考（本章）實現
1.1 資料庫apps表建立
DROP TABLE IF EXISTS `apps`;
CREATE TABLE `apps` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '自增id',
`appId` varchar(50) DEFAULT NULL COMMENT '應用服務ID',
`productId` bigint DEFAULT NULL COMMENT '外來鍵關聯產品所屬',
`note` varchar(100) DEFAULT NULL COMMENT '應用描述',
`tester` varchar(300) DEFAULT NULL COMMENT '測試負責人',
`developer` varchar(300) DEFAULT NULL COMMENT '預設研發負責人',
`producer` varchar(300) DEFAULT NULL COMMENT '預設產品經理',
`CcEmail` varchar(500) DEFAULT NULL COMMENT '預設抄送郵件或組',
`gitCode` varchar(200) DEFAULT NULL COMMENT '程式碼地址',
`wiki` varchar(200) DEFAULT NULL COMMENT '專案說明地址',
`more` text COMMENT '更多的資訊',
`status` char(1) DEFAULT '0' COMMENT '狀態0正常1刪除',
`creteUser` varchar(20) DEFAULT NULL COMMENT '建立人',
`createDate` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
`updateUser` varchar(20) DEFAULT NULL COMMENT '修改人',
`updateDate` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改時間',
PRIMARY KEY (`id`),
UNIQUE KEY `apps_id_uindex` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10014 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='應用管理';
1.2 方便的測試資料
BEGIN;
INSERT INTO `apps` VALUES (10000, 'goods_server', 11, '商品中心服務', '[email protected]', '[email protected]', '[email protected]', '[email protected];[email protected]', 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15103321.html', '商品中心為訂單的基礎上游服務，有訂單業務團隊負責', '0', 'MrzCode', '2021-09-05 17:50:09', 'MrzCodeUpdate', '2021-09-07 09:59:51');
INSERT INTO `apps` VALUES (10001, 'payment_core', 2, '支付核心服務', '[email protected]', '[email protected]', '[email protected]', NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15118881.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:16', 'MrzCodeUpdate', '2021-09-07 10:00:48');
INSERT INTO `apps` VALUES (10002, 'risk_control', 16, '風控服務', '[email protected]', '[email protected];[email protected]', '[email protected]', NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15130629.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:20', 'MrzCodeUpdate', '2021-09-07 10:00:53');
INSERT INTO `apps` VALUES (10003, 'order_new', 16, '新訂單服務', '[email protected]', '[email protected]', NULL, '[email protected];[email protected]', NULL, 'https://www.cnblogs.com/mrzcode/p/15139227.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:23', 'MrzCodeUpdate', '2021-09-07 10:00:55');
INSERT INTO `apps` VALUES (10004, 'message_server', 16, '訊息服務中心', '[email protected];[email protected]', '[email protected];[email protected];[email protected]', '[email protected]', NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15136302.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:27', 'MrzCodeUpdate', '2021-09-07 10:00:57');
INSERT INTO `apps` VALUES (10005, 'user_center', 10, '使用者服務中心', '[email protected]', '[email protected]', '[email protected]', NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15160329.html', '基礎服務，使用者模組，管理公司內部使用者和外網所有使用者資訊', '0', 'MrzCode', '2021-09-05 17:50:31', 'MrzCodeUpdate', '2021-09-07 10:00:10');
INSERT INTO `apps` VALUES (10006, 'finance_web', 10, '財務服務系統', '[email protected]', '[email protected]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 17:55:41', NULL, '2021-09-07 10:00:23');
INSERT INTO `apps` VALUES (10007, 'search_all', 17, '全域搜尋', '[email protected]', '[email protected]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 17:55:47', NULL, '2021-09-07 10:00:20');
INSERT INTO `apps` VALUES (10008, 'domain_server', 17, '域名服務系統', '[email protected]', '[email protected]', NULL, NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15216885.html', NULL, '0', 'MrzCode', '2021-09-05 20:21:12', NULL, '2021-09-07 10:00:18');
INSERT INTO `apps` VALUES (10009, 'email_server', 16, '郵件系統', '[email protected]', '[email protected]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 20:21:29', NULL, '2021-09-07 10:00:58');
INSERT INTO `apps` VALUES (10010, 'hr_services', 10, '人力資源系統', '[email protected]', '[email protected]', '[email protected]', '[email protected]', NULL, NULL, NULL, '0', 'DaQi', '2021-09-05 20:21:58', NULL, '2021-09-07 10:00:07');
INSERT INTO `apps` VALUES (10011, 'config_center', 16, '配置中心', '[email protected]', '[email protected]', NULL, NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15216885.html', NULL, '0', 'DaQi', '2021-09-05 20:22:28', NULL, '2021-09-07 10:01:00');
INSERT INTO `apps` VALUES (10012, 'case_platform', 16, '用例管理平臺', '[email protected]', '[email protected]', NULL, NULL, NULL, NULL, NULL, '0', 'DaQi', '2021-09-05 20:23:24', NULL, '2021-09-07 10:01:02');
INSERT INTO `apps` VALUES (10013, 'qa_manger', 16, '測試中心', '[email protected]', '[email protected]', '[email protected]', '', '', '', '', '0', 'DaQi', '2021-09-05 20:27:07', 'DaQi', '2021-09-07 10:01:01');
COMMIT; SET FOREIGN_KEY_CHECKS = 1;
2. 建立一個常量配置
目錄/configs/config.py
# config.py
# 資料庫配置
MYSQL_HOST= 'localhost'
MYSQL_PORT = 3306
MYSQL_DATABASE = 'TPMStore'
MYSQL_USER = 'mrzcode'
MYSQL_PASSWORD = 'mrzcode'
3. 建立新的藍圖api應用管理模組，實現DBUntils初始化連線
路徑 /apis/application.py ，並匯入config資料庫配置，以及dbutils模組
from flask import Blueprint
from dbutils.pooled_db import PooledDB
from configs import config import pymysql.cursors # 使用資料庫連線池的方式連結資料庫，提高資源利用率
pool = PooledDB(pymysql, mincached=2, maxcached=5,host=config.MYSQL_HOST, port=config.MYSQL_PORT,
user=config.MYSQL_USER, passwd= config.MYSQL_PASSWORD, database=config.MYSQL_DATABASE,
cursorclass=pymysql.cursors.DictCursor) app_application = Blueprint("app_application", __name__)
4. 建立一個統一格式類
目錄/configs/ 新增一個統一Response返回
# format.py
resp_format_success = {
"code": 20000,
"message": "success",
"data": [],
"total": 0
}
5. 實現所屬分類查詢用於條件篩選
@app_application.route("/api/application/product",methods=['GET'])
def getProduct():
# 使用連線池連結資料庫
connection = pool.connection()
with connection.cursor() as cursor:
# 查詢產品資訊表-按更新時間新舊排序
sql = "SELECT id,keyCode,title FROM `products` WHERE `status`=0 ORDER BY `update` DESC"
cursor.execute(sql)
data = cursor.fetchall()
# 按返回模版格式進行json結果返回
response = format.resp_format_success
response['data'] = data
return response
6. 實現分頁查詢應用
需要對查詢條件進行按需拼接，還需要通過兩次查詢，一次查詢總數量，一次是limit分頁查詢
@app_application.route("/api/application/search",methods=['POST'])
def searchBykey():
body = request.get_data()
body = json.loads(body)
# 基礎語句定義
sql = ""
# 獲取pageSize和
pageSize = 10 if body['pageSize'] is None else body['pageSize']
currentPage = 1 if body['currentPage'] is None else body['currentPage']
# 拼接查詢條件
if 'productId' in body and body['productId'] != '':
sql = sql + " AND `productId` = '{}'".format(body['productId'])
if 'appId' in body and body['appId'] != '':
sql = sql + " AND `appId` LIKE '%{}%'".format(body['appId'])
if 'note' in body and body['note'] != '':
sql = sql + " AND `note` LIKE '%{}%'".format(body['note'])
if 'tester' in body and body['tester'] != '':
sql = sql + " AND `tester` LIKE '%{}%'".format(body['tester'])
if 'developer' in body and body['developer'] != '':
sql = sql + " AND `developer` LIKE '%{}%'".format(body['developer'])
if 'producer' in body and body['producer'] != '':
sql = sql + " AND `producer` LIKE '%{}%'".format(body['producer'])
# 排序和頁數拼接
sql = sql +' ORDER BY `updateDate` DESC LIMIT {},{}'.format((currentPage-1)*pageSize, pageSize)
print(sql)
# 使用連線池連結資料庫
connection = pool.connection()
with connection:
# 先查詢總數
with connection.cursor() as cursor:
cursor.execute('SELECT COUNT(*) as `count` FROM `apps` WHERE `status`=0' + sql)
total = cursor.fetchall()
# 執行查詢
with connection.cursor() as cursor:
# 按照條件進行查詢
cursor.execute('SELECT P.title, A.* FROM apps AS A,products AS P WHERE A.productId = P.id and A.`status`=0' + sql)
data = cursor.fetchall()
# 按分頁模版返回查詢資料
response = format.resp_format_success
response['data'] = data
response['total'] = total[0]['count']
return response
介面檔案全部實現完可不要忘記app.py檔案中添加註冊
from apis.application import app_application
....
app.register_blueprint(app_application)
7. vue前端對左側目錄進行重新整理
路徑 /src/router/index.js 變更，其中涉及到子選單用法，用children，這沒有而外講，直接照著程式碼一看就明白了。
{
path: '/settings',
component: Layout,
redirect: '/settings',
meta: { title: '基礎管理', icon: 'dashboard' },
children: [{
path: 'product',
name: 'Product',
component: () => import('@/views/product/product'),
meta: { title: '專案產品分類', icon: 'dashboard' }
},
{
path: 'apps',
name: 'apps',
component: () => import('@/views/product/apps'),
meta: { title: '服務應用管理', icon: 'dashboard' }
}
]
},
8. 建立應用頁面的api請求檔案和方法
目錄/src/api/apps.js 組裝產品列表和應用搜索介面請求
import request from '@/utils/request' // 應用搜索介面
export function apiAppsSearch(requestBody) {
return request({
url: '/api/application/search',
method: 'post',
data: requestBody
})
} // 產品選擇專案列表
export function apiAppsProduct() {
return request({
url: '/api/application/product',
method: 'get'
})
}
9. 實現搜尋區域功能
先要建立app管理頁面，路徑/src/views/product/apps.vue ，然後分別利用上邊的知識點實現自定義選擇框的繫結，和其他input欄位的繫結，另外有個新增 按鈕（本篇不實現）佔位，html區域如下，js內容最後統一給出。
<div class="filter-container">
<el-form :inline="true" :model="search">
<el-form-item label="歸屬分類">
<el-select v-model="search.productId" filterable="true" clearable>
<el-option value="" label="所有"></el-option>
<el-option
v-for="item in options"
:key="item.id"
:label="item.title"
:value="item.id">
<span style="float: left">{{ item.keyCode }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="應用ID">
<el-input v-model="search.appId" placeholder="服務ID關鍵詞" style="width: 200px;" clearable/>
</el-form-item>
<el-form-item label="描 述">
<el-input v-model="search.note" placeholder="描述模糊搜尋" style="width: 200px;" clearable/>
</el-form-item>
<br>
<el-form-item label="研 發">
<el-input v-model="search.developer" placeholder="預設研發" style="width: 210px;" clearable/>
</el-form-item>
<el-form-item label="產 品">
<el-input v-model="search.producer" placeholder="預設產品" style="width: 210px;" clearable/>
</el-form-item>
<el-form-item label="測 試">
<el-input v-model="search.tester" placeholder="預設測試" style="width: 210px;" clearable/>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="searchClick()">搜尋</el-button>
</el-form-item>
</el-form>
<el-button type="primary" icon="el-icon-plus" style="float:right" @click="addApp()">新增應用</el-button>
</div>
10.1 表格資料的繫結
歷史table的內容，可按照產品頁實現來，這裡注意依然有時間格式的問題，另外還需要添加個操作列是實現 編輯 功能（本篇不實現）佔位。
<el-table :data="tableData">
<!--:data prop繫結{}中的key，label為自定義顯示的列表頭-->
<el-table-column prop="appId" label="應用ID"/>
<el-table-column prop="note" label="描述" show-overflow-tooltip/>
<el-table-column prop="title" label="歸屬分類"/>
<el-table-column prop="developer" label="預設研發" />
<el-table-column prop="producer" label="預設產品"/>
<el-table-column prop="tester" label="預設測試"/>
<el-table-column prop="updateUser" label="更新人"/>
<el-table-column :formatter="formatDate" prop="updateDate" label="更新時間"/>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link icon="el-icon-edit" @click="updateApp(scope.row)">修改</el-link>
</template>
</el-table-column>
</el-table>
10.2 表格下方的分頁控制元件實現
帶背景的頁碼，以及其他上下頁，總數，自定義數量選擇。
<div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="search.currentPage"
:page-size="search.pageSize"
layout="total, sizes, prev, pager, next"
:page-sizes="[5, 10, 20, 30, 50]"
:total=total>
</el-pagination>
</div>
最後所有 script 部分的程式碼如下
<script>
import moment from 'moment'
import { apiAppsProduct, apiAppsSearch } from '@/api/apps' export default {
name: 'Apps',
data() {
return {
search: {
productId: '',
appId: '',
note: '',
developer: '',
producer: '',
tester: '',
pageSize: 10,
currentPage: 1
},
options: [],
total: 0,
tableData: []
}
},
// 頁面生命週期中的建立階段呼叫
created() {
// 呼叫methods的方法，即初次載入就請求資料
this.productList()
this.searchClick()
},
methods: {
formatDate(row, column) {
const date = row[column.property]
if (date === undefined) {
return ''
}
// 使用moment格式化時間，由於我的資料庫是預設時區，偏移量設定0，各自根據情況進行配置
return moment(date).utcOffset(0).format('YYYY-MM-DD HH:mm')
},
productList() {
apiAppsProduct().then(resp => {
this.options = resp.data
})
},
searchClick() {
apiAppsSearch(this.search).then(response => {
// 將返回的結果賦值給表格自動匹配
this.tableData = response.data
this.total = response.total
})
},
handleSizeChange(val) {
// console.log(`每頁 ${val} 條`)
this.search.pageSize = val
this.searchClick()
},
handleCurrentChange(val) {
// console.log(`當前頁: ${val}`)
this.search.currentPage = val
this.searchClick()
},
addApp() {
this.$message({
message: '我是待實現的CASE',
type: 'warning'
})
},
updateApp() {
this.$message({
message: '我是待實現的CASE',
type: 'warning'
})
}
}
}
</script>
如果你是一步步自己走下來，或者參考下來，實際上還是方式，完成一個步驟進行一個驗證，有問題解決掉，然後進行下個，那麼你到最後應該都不是有有問題，分別啟動前後的頁面實現效果如下：
問題集錦
1. Python Myql查詢資料返回的是元組型別，而非字典型別
在編碼中優化使用DBUnitls建立資料連線時候，沒有給定引數cursorclass，導致預設返回資料為元組型別，這樣對返回資料還要進行二次轉換操作，比較麻煩，新增 cursorclass=pymysql.cursors.DictCursor 可以設定返回型別為字典，之前專案中使用的時候還沒太注意這個引數的意義，現在通過問題發現它的功能了。
2. 分別更改對其方式
element-ui的分頁元件使用後，預設是居左側對其的，但一般常見產品頁面都會放在中間或者右側對其，但元件本身又沒有提供對其的屬性可設定，通過搜尋，可以通過在樣式程式碼塊中，自定義下 .el-pagination 的css樣式就行。
<style scoped>
.el-pagination {
text-align: right;
}
</style>
【程式碼更新】
地址：https://github.com/mrzcode/TestProjectManagement
TAG：TPMShare9
【註解&參考】
[註解-1] :https://webwareforpython.github.io/DBUtils/main.html
[註解-2] :https://element.eleme.io/#/zh-CN/component/pagination
[註解-3] :https://element.eleme.io/#/zh-CN/component/select
堅持原創，堅持實踐，堅持乾貨，如果你覺得有用，請點選推薦，也歡迎關注我部落格園和微信公眾號。