在我們一般開發的系統界面里面，串列頁面是一個非常重要的綜合展示界面，包括有條件查詢、串列展示和分頁處理，以及對每項串列內容可能進行的轉義處理，本篇隨筆介紹基于Vue +Element基礎上實作表格串列頁面的查詢，串列展示和欄位轉義處理，
在前面隨筆《循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理》介紹了一個對產品串列的卡片式圖片分頁展示處理，其中涉及到了對于Element 組件分頁控制元件的操作，本篇隨筆繼續深化這一組件的使用，結合表格展示來處理效果展示，
1、串列查詢界面效果
在介紹任何代碼處理邏輯之前，我們先來做一個感官的認識，貼上一個效果圖，在逐一介紹其中處理的步驟和注意事項，
常規的串列展示界面，一般分為幾個區域，一個是查詢區域，一個是串列展示區域，一個是底部的分頁組件區域，查詢區域主要針對常規條件進行布局，以及增加一些全域或者批量的操作，如匯入、匯出、添加、批量添加、批量洗掉等按鈕；而其中主體的串列展示區域，是相對比較復雜一點的地方，需要對各項資料進行比較友好的展示，可以結合Tag,圖示，按鈕等界面元素來展示，其中串列一般后面會包括一些對單行記錄處理的操作，如查看、編輯、洗掉的操作，如果是批量洗掉，可以放到頂部的按鈕區域，
2、查詢區域的處理
查詢區域一般的界面效果如下所示，除了包含一些常用的查詢條件，并增加一些常規的處理按鈕，如查詢、重置、新增、批量洗掉、匯入、匯出等按鈕，
對于查詢區域來說，它也是一個表單的處理，因此也需要添加一一個對應的物件來承載表單的資料，在data里面增加一個searchForm的模型物件，以及一個用于分頁查詢的pageinfo物件，如下代碼所示，
export default { data() { return { listLoading: true, pageinfo: { pageindex: 1, pagesize: 10, total: 0 }, searchForm: { ProductNo: '', BarCode: '', ProductType: '', ProductName: '', Status: 0 },
視圖模板代碼如下所示
<el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-row> <el-col :span="6"> <el-form-item label="產品編號" prop="ProductNo"> <el-input v-model="searchForm.ProductNo" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="產品名稱" prop="ProductName"> <el-input v-model="searchForm.ProductName" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="商品型別" prop="ProductType"> <el-select v-model="searchForm.ProductType" filterable clearable placeholder="請選擇"> <el-option v-for="(item, key) in typeList" :key="key" :label="item.value" :value="item.key" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="狀態" prop="Status"> <el-select v-model="searchForm.Status" filterable clearable placeholder="請選擇"> <el-option v-for="item in Status" :key="item.Value" :label="item.Text" :value="item.Value" /> </el-select> </el-form-item> </el-col> </el-row> </el-form> <el-row style="float:right;padding-bottom:10px"> <el-button icon="el-icon-search" type="primary" round @click="search()">查詢</el-button> <el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">重置</el-button> <el-button icon="el-icon-document-add" type="success" round @click="showAdd()">新增</el-button> <el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">批量洗掉</el-button> <el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">匯入</el-button> </el-row>
其中產品型別的是下拉串列，我們通過在data區域獲取一個物件，并在此遍歷可以展示字典內容，如果我們花點時間，可以把這些下拉串列統一按照一個常規的處理模式，定義一個字典組件的方式實作，簡單賦予一個字典型別的Prop值，就可以系結下拉串列了，這個稍后在細講，
在Vue的腳本處理邏輯里面，我們可以在Created宣告周期里面，通過API獲取資料，系結在模型上，界面就會自動進行更新了，處理程序代碼如下所示，
created() { // 獲取產品型別，用于系結字典等用途 GetProductType().then(data =https://www.cnblogs.com/wuhuacong/p/> { if (data) { data.forEach(item => { this.productTypes.set(item.id, item.name) this.typeList.push({ key: item.id, value: item.name }) }) } }); // 獲取串列資訊 this.getlist() }, methods: { getlist() { // 構造常規的分頁查詢條件 var param = { type: this.producttype === 'all' ? '' : this.producttype, pageindex: this.pageinfo.pageindex, pagesize: this.pageinfo.pagesize }; // 把SearchForm的條件加入到param里面，進行提交查詢 param.type = this.searchForm.ProductType // 轉換為對應屬性 Object.assign(param, this.searchForm); // 獲取產品串列，系結到模型上，并修改分頁數量 this.listLoading = true GetProductList(param).then(data => { this.productlist = data.list this.pageinfo.total = data.total_count this.listLoading = false }) },
其中 Object.assign(param, this.searchForm); 陳述句處理，是把獲得的查詢條件，覆寫原來物件里面的屬性，從而實作查詢條件的變數賦值，
獲得串列資料，就是介紹如何展示表格串列資料的程序了，表格界面效果如下所示，
先定義一個表格頭部，類似HTML里面的<table>的標簽，指定樣式和一些常規的操作函式，如下代碼所示，
<el-table v-loading="listLoading" :data="productlist" border fit stripe highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" >
具體的屬性可以參考下Element組件關于表格控制元件的屬性了，在表格列里面，我們主要關注它的data系結即可，
接著定義一列復選框選擇的列，用于批量處理的勾選，如批量洗掉操作，
<el-table-column type="selection" width="55"/>
接著就是根據回傳JSON屬性，逐一進行內容轉換為表格列的展示程序了，如下所示，
<el-table-column label="商品編號" width="80"> <template slot-scope="scope"> {{ scope.row.ProductNo }} </template> </el-table-column>
我們如果需要在顯示里面增加處理效果，一般在template里面修改展示效果即可，如下是單位的處理，增加一個tag標志強調下，
<el-table-column align="center" label="單位" width="80"> <template slot-scope="scope"> <el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag> </template> </el-table-column>
而對于一些需要判斷處理的效果，我們可以對內容進行判斷輸出，如下狀態所示，
<el-table-column label="狀態" width="80"> <template slot-scope="scope"> <el-tag v-if="scope.row.Status==0" type="" effect="dark">正常</el-tag> <el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">推薦</el-tag> <el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">停用</el-tag> </template> </el-table-column>
另外，對于一些常見的日期處理，我們可以使用Formatter，Filter等手段進行內容的轉義處理，可以去掉后面的時間部分，
<el-table-column align="center" label="創建日期" width="120" prop="CreateTime" :formatter="dateFormat" />
dataFormat就是一個轉義函式，函式代碼如下所示，
dateFormat(row, column, cellValue) { return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : '' },
使用的時候，需要在頂部引入一個類別庫即可
import * as fecha from 'element-ui/lib/utils/date'
對于類似需要進行字典轉義的操作，我們可以使用Formatter的方式轉義，如增加一個函式來決議對應的值為中文資訊
效果可以使用Formatter來轉義
productTypeFormat(row, column, cellValue) { var display = this.productTypes.get(cellValue) return display || '' },
也可以使用Filter模式來進行處理，
這里介紹使用Filter的操作處理，首先在界面HTML代碼里面增加對應的操作，如下代碼所示，
<el-table-column align="center" label="商品型別" width="120" prop="ProductType"> <template slot-scope="scope"> <el-tag type="danger"> {{ scope.row.ProductType | productTypeFilter }}</el-tag> </template> </el-table-column>
Filter其實就是一個 | 過濾符號，以及接著一個過濾函式處理即可，
export default { filters: { productTypeFilter: function(value) { if (!value) return '' var display = that.productTypes.get(value) return display || '' } },
值得注意的是，Filter本身不能參考data里面的屬性串列進行轉義的需要，如果需要，那么需要在beforeCreate的鉤子函式里面記錄this的參考，如下代碼所示，
對于操作按鈕，我們需要增加一行來顯示幾個按鈕即可，如果需要權限控制，可以再根據權限集合判斷一下可操作權限即可，
<el-table-column label="操作" width="140"> <template scope="scope"> <el-row> <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-row> </template> </el-table-column>
這里showView/showEdit/ShowDelete主要就是做一些彈出層前的處理操作，我們在data項里面定義了幾個變數，用來確定是那個操作顯示的需要，
isAdd: false, isEdit: false, isView: false, isImport: false,
例如對應編輯操作，我們是需要通過API處理類，獲取后端資料，并賦值給編輯框的表單物件上，進行展示即可，
showEdit(id) { // 通過ID引數，使用API類獲取資料后，賦值給物件展示 var param = { id: id } GetProductDetail(param).then(data => { Object.assign(this.editForm, data); }) this.isEdit = true },
對于查看處理，我們除了在每行按鈕上可以單擊進行查看指定行記錄外，我們雙擊指定的行，也應該彈出對應的查看記錄界面
rowDbclick(row, column) { var id = row.ID this.showView(id); },
這個就是表格定義里面的一些處理事件
<el-table v-loading="listLoading" :data="productlist" border fit stripe highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" >
每個對話框的:visible的屬性值，則是確定哪個模態對話框的顯示和隱藏，
而對于洗掉操作，我們只需要確認一下，然后提交遠端處理，回傳正常結果，就提示用戶洗掉成功即可，如下邏輯代碼所示，
showDelete(id) { this.$confirm('您確認洗掉選定的記錄嗎?', '操作提示', { type: 'warning' // success，error，info，warning // confirmButtonText: '確定', // cancelButtonText: '取消' } ).then(() => { // 洗掉操作處理代碼 this.$message({ type: 'success', message: '洗掉成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消洗掉' }); }); },
以上就是常規表格串列頁面查詢、串列展示、欄位轉義的一些常規操作，以及對新增、編輯、查看、洗掉操作的一些常規處理，通過對這些模型的操作，減少了我們以往重新獲取對應DOM的繁瑣操作，是的資料的操作處理，變得方便了很多，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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）--- 功能點管理及權限控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31392.html
標籤：Html/Css
下一篇：前端CSS五中元素定位型別