在我們使用Vue+Element開發前端的時候，往往涉及到很多界面組件的使用，其中很多直接采用Element官方的案例即可，有些則是在這個基礎上封裝更好利用、更少代碼的組件；另外有些則是直接采用第三方開發好的組件，目的就是實作所需功能外，盡量簡化界面使用代碼，本篇隨筆介紹在我的專案中經常用到的各種界面組件和它的界面效果，以便在實際開發中進行相應的參考，提高開發效率，
本篇繼續上一篇隨筆《循序漸進VUE+Element 前端應用開發(25）--- 各種界面組件的使用（1）》，對界面控制元件進行進一步的介紹，
7、樹串列及控制元件封裝
在很多資料展示場景中，都需要引入樹狀串列進行展示，包括無窮層級的樹串列，或者簡單的主從表關系，都可能用到樹串列的展示，
樹串列控制元件的使用，之前在隨筆中《循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用》
這些都是基于Element的樹形控制元件進行使用或封裝組件使用的界面，
樹串列的簡單使用代碼如下所示，
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
資料這是一個嵌套的串列物件即可，如下代碼所示
treedata: [ // 初始化樹串列 { label: '一級 1', children: [{ label: '二級 1-1' }] }]
我們只要根據實際情況構建好這些資料給樹控制元件使用即可，一般樹形控制元件頂部會帶一個輸入框來進行鍵值查詢過濾的操作，以方便用戶快速檢索的，
如果設定有選擇框，得到界面如下所示，
主要設定 show-checkbox 和 @check-change="handleCheckChange" 即可，
界面代碼如下所示
<el-tree style="padding-top:10px" :data="treedata" node-key="id" default-expand-all highlight-current show-checkbox :default-checked-keys="['1-1-1']" @node-click="handleNodeClick" @check-change="handleCheckChange" > <span slot-scope="{ node, data }" class="custom-tree-node"> <span> <i :class="node.icon ? node.icon : 'el-icon-price-tag'" /> {{ node.label }} </span> </span> </el-tree>
有時候，我們樹串列控制元件的資料可能來源于常規的二維表，如下資料格式所示，
var data =https://www.cnblogs.com/wuhuacong/p/ [ {"id":1,"parent":0,"addr":"重慶"}, {"id":11,"parent":1,"addr":"重慶"}, {"id":12,"parent":1,"addr":"重慶"}, {"id":121,"parent":12,"addr":"重慶"}, {"id":2,"parent":0,"addr":"重慶"}, {"id":21,"parent":2,"addr":"重慶"}, {"id":211,"parent":21,"addr":"重慶"}, {"id":3,"parent":0,"addr":"重慶"}, {"id":4,"parent":0,"addr":"重慶"}, {"id":31,"parent":3,"addr":"重慶"}, {"id":32,"parent":3,"addr":"重慶"} ];
而樹控制元件使用的data 則是嵌套資料，我們如果每次使用都需要為它們專門做一個函式有點多余，我們可以用前端轉換的方式來實作樹資料的轉換，
具體操作可以參考：https://blog.csdn.net/unamattin/article/details/77152451
//二維串列轉樹形控制元件所需嵌套資料格式 export function getJsonTree(data, config) { const id = config.id || 'id'; const pid = config.pid || 'pid'; const children = config.children || 'children'; const label = config.label || 'name';// 默認label為name欄位 const idMap = []; const jsonTree = []; data.forEach(function(v) { idMap[v[id]] = v; }); data.forEach(function(v) { const parent = idMap[v[pid]]; if (parent) { !parent[children] && (parent[children] = []); parent[children].push(v); } else { jsonTree.push(v); } }); // treeAddIcon(jsonTree, label);// 回圈遍歷給tree加圖示 return jsonTree; }
這樣樹串列的系結操作如下代碼所示，
getTree() { // 樹串列資料獲取
var param = {
SkipCount: 0,
MaxResultCount: 1000
}
category.GetAll(param).then(data => {
this.treedata = https://www.cnblogs.com/wuhuacong/p/[];// 樹串列清空
var list = data.result.items
if (list) {
// console.log(list)
// 使用getJsonTree函式，實作對二維表轉換為嵌套樹物件集合
var newTreedata =https://www.cnblogs.com/wuhuacong/p/ getJsonTree(list, {
id: 'id',
pid: 'pid',
children: 'children',
label: 'categoryName'
});
// console.log(newTreedata)
this.treedata =https://www.cnblogs.com/wuhuacong/p/ newTreedata
}
});
},
順便說一下，由于引入一些原始控制元件需要實作很多相應的操作，一般情況下，我們可以把樹控制元件常規的處理封裝成一個組件的方式使用，其中包括了常規的過濾、選中等操作處理，如下是我們簡單封裝的樹控制元件的自定義組件，用于處理常規的樹串列資訊，
這樣使用起來，界面代碼減少很多，只需要實作對應的事件即可，
<myTree :data="treedata" :default-expand-all="false" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />
另外，更高維度上，我們還可以把業務界面按模塊分離出來，實作不同的界面的組裝，這樣可以減輕代碼的臃腫程度，提高代碼可讀性，
如之前說過的機構資訊，頁面邏輯比較多，可以簡化為各個不同的模塊，然后拼裝組件即可，
例如：對于權限系統中的每個角色，除了包含基本資訊外，還會包含擁有的權限（功能控制點）、包含用戶，以及擁有的選單，其中權限是用來控制界面元素，如操作按鈕的顯示的，而擁有的選單，則是用戶以指定賬號登錄系統后，獲得對應角色的選單，然后構建對應的訪問入口的，角色界面模塊UML類圖如下所示，
那么對應界面元素上，我們就應該以不同的Tab來展示這些資訊，每個Tab內容部分就可以作為一個獨立的界面組件來開發，
8、按鈕及按鈕組
按鈕比較常用，一般我們依照常規的方式使用，并設定樣式即可，
代碼如下所示
<el-row> <el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">資訊按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>資訊按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button> </el-row> <el-row> <el-button round>圓角按鈕</el-button> <el-button type="primary" round>主要按鈕</el-button> <el-button type="success" round>成功按鈕</el-button> <el-button type="info" round>資訊按鈕</el-button> <el-button type="warning" round>警告按鈕</el-button> <el-button type="danger" round>危險按鈕</el-button> </el-row> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row>
我在之前的界面中采用的按鈕樣式如下所示，
后來我覺得把按鈕組合起來更好看，也更節省空間，
這里其實就是使用了按鈕組的作用，
<!--功能操作按鈕 --> <el-row style="float:right;padding-bottom:10px"> <el-button-group> <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查詢</el-button> <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button> </el-button-group> <el-button-group> <el-button icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button> <el-button icon="el-icon-document-remove" type="danger" size="mini" round :disabled="listSelection.length === 0" @click="batchDelete()">批量洗掉</el-button> </el-button-group> <el-button-group> <el-button icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">匯入</el-button> <el-button icon="el-icon-download" :loading="downloadLoading" type="primary" size="mini" round @click="handleDownload()">匯出</el-button> </el-button-group> </el-row>
9、表格控制元件的使用
表格控制元件是我們展示資料庫二維表內容的重要承載，一般在主串列頁面中展示表格資料，
表格控制元件的使用也比較簡單，簡單案例的代碼所示，
<template> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template>
但往往我們處理表格列的各種內容承載的時候，需要豐富很多，如包括標簽、Switch開關，按鈕操作、日期格式化、內容轉換等操作，
如標簽列，可以進行回圈處理，
<el-table-column align="center" label="標簽" width="100"> <template slot-scope="scope"> <el-tag v-for="tag in scope.row.tags.split(',')" :key="tag" type="primary" > {{ tag }} </el-tag> </template> </el-table-column>
或者結合過濾器進行處理，
<el-table-column align="center" label="狀態"> <template slot-scope="scope"> <el-tag :type="(scope.row.state === 0) ? 'success' : 'danger'" effect="dark"> {{ scope.row.state | stateFilter }}</el-tag> </template> </el-table-column>
日期，我們也用日期過濾器實作轉換，
<el-table-column align="center" label="創建時間" width="160" prop="creationTime" :formatter="timeFormat" />
表格的操作列，整個對單個記錄操作的各種操作入口，
<!--表格行操作按鈕 --> <el-table-column align="center" label="操作" width="110"> <template scope="scope"> <el-row> <el-button-group> <el-tooltip effect="light" content="查看" placement="top-start"> <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" /> </el-tooltip> <el-tooltip effect="light" content="編輯" placement="top-start"> <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" /> </el-tooltip> <el-tooltip effect="light" content="洗掉" placement="top-start"> <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" /> </el-tooltip> </el-button-group> </el-row> </template> </el-table-column>
如果是開關操作，我們也可以結合一起展示和操作處理，
操作代碼如下所示
<el-table-column align="center" label="狀態"> <template slot-scope="scope"> <el-tag :type="scope.row.status==0 ? 'success' : 'warning'" effect="dark"> {{ scope.row.status==0 ? '正常' : '停用' }} </el-tag> <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="changeStatus(scope.$index, scope.row)" /> </template> </el-table-column>
另外表格資料，一般還涉及到Excel的匯出操作，這個其實是采用了SheetJS的處理方式草操作XLSX的方式匯出Excel的，這里參考了前人開發的Export2Excel 組件進行處理，
handleDownload() { // 匯出Excel檔案
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['父ID', '分類編碼', '分類名稱', '分類描述', '分類圖片封面', '分類圖示', '排序', '狀態']
const filterVal = ['pid', 'categoryCode', 'categoryName', 'note', 'pictureUrl', 'icon', 'sortCode', 'status']
const list = this.list
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '商品分類',
autoWidth: true,
bookType: 'xlsx'
})
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'creationTime') {
return this.parseTime(v[j], '{y}-{m}-{d} {h}:{i}:{s}')
} else {
return v[j]
}
}))
},
一般來說，Element的表格控制元件已經具有非常豐富的功能了，包括固定行列、展開行、懶加載資料、多級表頭、排序篩選、自定義列、合計行列等操作，
如果有需要直接編輯表格資料的操作，建議可以采用第三方表格組件來實作：https://github.com/huangshuwei/vue-easytable
10、樹形下拉串列框及封裝
除了常規的樹串列展示內容外，我們也需要一個在下拉串列中展示樹內容的界面組件，
這里又得引入一個第三方的界面組件，因此Element的Select組件不支持樹串列，
GitHub地址：https://github.com/riophae/vue-treeselect
官網地址：https://vue-treeselect.js.org/
常規的界面代碼如下使用
<treeselect v-model="value" :multiple="true" :options="options" />
復雜一點的使用界面代碼，可以指定更多的屬性設定，以及處理事件操作，
<treeselect v-model="value" :options="treedata" :multiple="true" :flat="true" :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true" clearable :max-height="200" />
這里的options就是樹控制元件的資料，是一個嵌套結構的串列物件
options: [ { id: 'a', label: 'a', children: [ { id: 'aa', label: 'aa', } ],
另外，有時候我們可能在樹選擇框中需要用來設定父級串列的處理，由于這個業務比較常見，而且邏輯相對比較通用，那么我們可以考慮把它封裝為一個組件的方式，然后再在界面上使用，
界面使用效果如下所示
這樣勾選【作為頂級目錄項】，那么則會自動置空內容，也就是父ID為空了，如果選擇具體的樹節點，那么就以該節點的ID作為PID，這樣操作把呼叫界面處理的邏輯簡化了，更方便使用，
<el-col :span="24"> <el-form-item label="父項名稱" prop="pid"> <MyTreeselectTop v-model="addForm.pid" :options="treedata" /> </el-form-item> </el-col>
這樣我們可以在多處使用這個帶有樹串列展示，以及設定頂級節點的樹串列框選擇控制元件了，如在批量錄入商品分類的操作界面中一樣使用，
11、其他組件
組件不可能一一介紹完，一般情況下，我們依照我們的資料展示需要，引入不同的界面組件，一般可以在GitHub上找到很多對比，找適合自己的且評分較高的即可，
如條碼和二維碼組件，我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，一般在Github上搜索下關鍵字，總能找到一些很受歡迎的第三方組件，
安裝這些組件都有具體的說明，如下所示(如果卸載，直接修改install為uninstall即可），
npm install @chenfengyuan/vue-barcode vue
以及
npm install @chenfengyuan/vue-qrcode vue
條碼和二維碼的展示效果如下所示
如果全域引入barcode和qrcode 組件，我們在main.js里面引入即可，如下代碼所示
// 引入barcode,qrcode import VueBarcode from '@chenfengyuan/vue-barcode'; import VueQrcode from '@chenfengyuan/vue-qrcode'; Vue.component(VueBarcode.name, VueBarcode);
圖表組件，我們這里使用了基于vue-echarts組件模塊來處理各種圖表vue-echarts是對echarts圖表組件的封裝，
首先使用npm 安裝vue-echarts組件，
git地址：https://github.com/ecomfe/vue-echarts
NPM安裝命令
npm install echarts vue-echarts
然后在對應模塊頁面里面引入對應的組件物件，如下代碼所示，
import ECharts from 'vue-echarts' // 主圖表物件 import 'echarts/lib/chart/line' // 曲線圖表 import 'echarts/lib/chart/bar' // 柱狀圖 import 'echarts/lib/chart/pie' // 餅狀圖 import 'echarts/lib/component/tooltip' // 提示資訊
在Vue模塊頁面的Template 里面，我們定義界面代碼如下即可，
<v-chart ref="simplebar" :options="simplebar" autoresize />
然后在data里面為它準備好資料即可，如下代碼所示，
data() { return { simplebar: { title: { text: '柱形圖Demo' }, tooltip: {}, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }
詳細可以參考我的隨筆：《循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示》
綜上這些界面控制元件的使用原則，原則上經常重用的部分，可以把它簡單化包裝為一個組件，這樣可以減少很多界面代碼和常規的處理JS函式，如果更高維度上還有抽離邏輯的可能呢，如我之前在角色、機構模塊里面處理很多公用邏輯界面一樣，我們把這些抽離出來作為一個組件模塊，加上一些特殊的開關或者屬性設定變數，就可以回應不同界面上的操作，
還有就是這些界面組件的使用，我們不可能一一的記住，那么使用合適的代碼生成工具來處理就會跟提高效率了，代碼生成工具，一般會根據欄位的資料型別，名稱等資訊，進行不同的處理，把常規的串列界面、查看、編輯、新增、匯入、匯入等界面和功能處理函式整合一起生成，我們在這個基礎上進行微調修改，效率更高，
我們的代碼生成工具Database2sharp，專門為優化過的框架結構進行代碼生成，在界面工具列或者選單中選擇【代碼生成】【ABP的Vue+Element界面代碼】，如下所示，
接著在出來的對話框上選擇對應資料庫和表進行生成，一步步執行即可，
使用代碼生成工具快速生成基于ABP框架的Vue+Element的前端界面，能夠使得我們提高代碼的開發效率，以及降低出錯的機會，同時可以很好的統一整套界面的界面樣式和做法，事半功倍，
生成的串列界面，包括查詢、表格、分頁等資訊，查詢框中包含一些關鍵欄位的資訊查詢，而表格中則包含重要欄位資訊的展示或者相關操作，
然后編輯界面，簡單的如下所示，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式
循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用
循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理
循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 選單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）--- 后端查詢介面和Vue前端的整合
循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼
循序漸進VUE+Element 前端應用開發(21）--- 省市區縣聯動處理的組件使用
循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全域界面函式、組件注冊等處理邏輯到不同的檔案中
循序漸進VUE+Element 前端應用開發(23）--- 基于ABP實作前后端的附件上傳，圖片或者附件展示管理
循序漸進VUE+Element 前端應用開發(24）--- 修改密碼的前端界面和ABP后端設定處理
循序漸進VUE+Element 前端應用開發(25）--- 各種界面組件的使用（1）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/202445.html
標籤：JavaScript