Vue 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-modelwww.cppcns.com="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()YBHoumQ">查詢</el-button> <el-button icon="el-icon-refresh-left" type="warning" round plain www.cppcns.com@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,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,columwww.cppcns.comn) { 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前端應用開發之表格列表展示的詳細內容,更多關於Vue Element的資料請關注我們其它相關文章!