循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和字段轉義處理,循序漸進VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理_包裝設計
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
網動廣告出品的網頁設計，採用精簡與質感的CSS語法，提升企業的專業形象與簡約舒適的瀏覽體驗，讓瀏覽者第一眼就愛上她。
在我們一般開發的系統界面裏面，列表頁面是一個非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁處理，以及對每項列表內容可能進行的轉義處理，本篇隨筆介紹基於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 => {
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）--- 獲取後端數據及產品信息頁面的處理
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
※產品缺大量曝光嗎?你需要的是一流包裝設計!
窩窩觸角包含自媒體、自有平台及其他國家營銷業務等，多角化經營並具有國際觀的永續理念。
Orignal From: 循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和字段轉義處理,循序漸進VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理_包裝設計
留言
張貼留言