在介紹任何代碼處理邏輯之前，我們先來做一個(gè)感官的認(rèn)識(shí)，貼上一個(gè)效果圖，在逐一介紹其中處理的步驟和注意事項(xiàng)。

常規(guī)的列表展示界面，一般分為幾個(gè)區(qū)域，一個(gè)是查詢區(qū)域，一個(gè)是列表展示區(qū)域，一個(gè)是底部的分頁組件區(qū)域。查詢區(qū)域主要針對(duì)常規(guī)條件進(jìn)行布局，以及增加一些全局或者批量的操作，如導(dǎo)入、導(dǎo)出、添加、批量添加、批量刪除等按鈕；而其中主體的列表展示區(qū)域，是相對(duì)比較復(fù)雜一點(diǎn)的地方，需要對(duì)各項(xiàng)數(shù)據(jù)進(jìn)行比較友好的展示，可以結(jié)合Tag,圖標(biāo)，按鈕等界面元素來展示，其中列表一般后面會(huì)包括一些對(duì)單行記錄處理的操作，如查看、編輯、刪除的操作，如果是批量刪除，可以放到頂部的按鈕區(qū)域。

查詢區(qū)域一般的界面效果如下所示，除了包含一些常用的查詢條件，并增加一些常規(guī)的處理按鈕，如查詢、重置、新增、批量刪除、導(dǎo)入、導(dǎo)出等按鈕。

對(duì)于查詢區(qū)域來說，它也是一個(gè)表單的處理，因此也需要添加一一個(gè)對(duì)應(yīng)的對(duì)象來承載表單的數(shù)據(jù)，在data里面增加一個(gè)searchForm的模型對(duì)象，以及一個(gè)用于分頁查詢的pageinfo對(duì)象，如下代碼所示。

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='產(chǎn)品編號(hào)' prop='ProductNo'> <el-input v-model='searchForm.ProductNo' /> </el-form-item></el-col><el-col :span='6'> <el-form-item label='產(chǎn)品名稱' 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='請(qǐng)選擇'> <el-optionv-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='狀態(tài)' prop='Status'> <el-select v-model='searchForm.Status' filterable clearable placeholder='請(qǐng)選擇'> <el-optionv-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()'>導(dǎo)入</el-button> </el-row>

其中產(chǎn)品類型的是下拉列表，我們通過在data區(qū)域獲取一個(gè)對(duì)象，并在此遍歷可以展示字典內(nèi)容，如果我們花點(diǎn)時(shí)間，可以把這些下拉列表統(tǒng)一按照一個(gè)常規(guī)的處理模式，定義一個(gè)字典組件的方式實(shí)現(xiàn)，簡單賦予一個(gè)字典類型的Prop值，就可以綁定下拉列表了，這個(gè)稍后在細(xì)講。

在Vue的腳本處理邏輯里面，我們可以在Created聲明周期里面，通過API獲取數(shù)據(jù)，綁定在模型上，界面就會(huì)自動(dòng)進(jìn)行更新了，處理過程代碼如下所示。

created() { // 獲取產(chǎn)品類型，用于綁定字典等用途 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() { // 構(gòu)造常規(guī)的分頁查詢條件 var param = {type: this.producttype === ’all’ ? ’’ : this.producttype,pageindex: this.pageinfo.pageindex,pagesize: this.pageinfo.pagesize }; // 把SearchForm的條件加入到param里面，進(jìn)行提交查詢 param.type = this.searchForm.ProductType // 轉(zhuǎn)換為對(duì)應(yīng)屬性 Object.assign(param, this.searchForm); // 獲取產(chǎn)品列表，綁定到模型上，并修改分頁數(shù)量 this.listLoading = true GetProductList(param).then(data => {this.productlist = data.listthis.pageinfo.total = data.total_countthis.listLoading = false }) },

其中Object.assign(param, this.searchForm); 語句處理，是把獲得的查詢條件，覆蓋原來對(duì)象里面的屬性，從而實(shí)現(xiàn)查詢條件的變量賦值。

獲得列表數(shù)據(jù)，就是介紹如何展示表格列表數(shù)據(jù)的過程了，表格界面效果如下所示。

先定義一個(gè)表格頭部，類似HTML里面的<table>的標(biāo)簽，指定樣式和一些常規(guī)的操作函數(shù)，如下代碼所示。

<el-table v-loading='listLoading' :data='productlist' border fit stripe highlight-current-row :header-cell- @selection-change='selectionChange' @row-dblclick='rowDbclick' >

具體的屬性可以參考下Element組件關(guān)于表格控件的屬性了，在表格列里面，我們主要關(guān)注它的data綁定即可。

接著定義一列復(fù)選框選擇的列，用于批量處理的勾選，如批量刪除操作。

<el-table-column type='selection' />

接著就是根據(jù)返回JSON屬性，逐一進(jìn)行內(nèi)容轉(zhuǎn)換為表格列的展示過程了，如下所示。

<el-table-column label='商品編號(hào)' width='80'><template slot-scope='scope'> {{ scope.row.ProductNo }}</template></el-table-column>

我們?nèi)绻枰陲@示里面增加處理效果，一般在template里面修改展示效果即可，如下是單位的處理，增加一個(gè)tag標(biāo)志強(qiáng)調(diào)下。

<el-table-column label='單位' width='80'><template slot-scope='scope'> <el-tag type='' effect='plain'> {{ scope.row.Unit }}</el-tag></template></el-table-column>

而對(duì)于一些需要判斷處理的效果，我們可以對(duì)內(nèi)容進(jìn)行判斷輸出，如下狀態(tài)所示。

<el-table-column label='狀態(tài)' 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>

另外，對(duì)于一些常見的日期處理，我們可以使用Formatter，F(xiàn)ilter等手段進(jìn)行內(nèi)容的轉(zhuǎn)義處理，可以去掉后面的時(shí)間部分。

<el-table-column label='創(chuàng)建日期' prop='CreateTime' :formatter='dateFormat' />

dataFormat就是一個(gè)轉(zhuǎn)義函數(shù)，函數(shù)代碼如下所示。

dateFormat(row, column, cellValue) { return cellValue ? fecha.format(new Date(cellValue), ’yyyy-MM-dd’) : ’’ },

使用的時(shí)候，需要在頂部引入一個(gè)類庫即可

import * as fecha from ’element-ui/lib/utils/date’

對(duì)于類似需要進(jìn)行字典轉(zhuǎn)義的操作，我們可以使用Formatter的方式轉(zhuǎn)義，如增加一個(gè)函數(shù)來解析對(duì)應(yīng)的值為中文信息

效果可以使用Formatter來轉(zhuǎn)義

productTypeFormat(row, column, cellValue) { var display = this.productTypes.get(cellValue) return display || ’’ },

也可以使用Filter模式來進(jìn)行處理。

這里介紹使用Filter的操作處理，首先在界面HTML代碼里面增加對(duì)應(yīng)的操作，如下代碼所示。

<el-table-column label='商品類型' prop='ProductType'> <template slot-scope='scope'> <el-tag type='danger'> {{ scope.row.ProductType | productTypeFilter }}</el-tag> </template> </el-table-column>

Filter其實(shí)就是一個(gè) | 過濾符號(hào)，以及接著一個(gè)過濾函數(shù)處理即可。

export default { filters: { productTypeFilter: function(value) { if (!value) return ’’ var display = that.productTypes.get(value) return display || ’’ } },

值得注意的是，F(xiàn)ilter本身不能引用data里面的屬性列表進(jìn)行轉(zhuǎn)義的需要，如果需要，那么需要在beforeCreate的鉤子函數(shù)里面記錄this的引用，如下代碼所示。

對(duì)于操作按鈕，我們需要增加一行來顯示幾個(gè)按鈕即可，如果需要權(quán)限控制，可以再根據(jù)權(quán)限集合判斷一下可操作權(quán)限即可。

<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主要就是做一些彈出層前的處理操作，我們?cè)赿ata項(xiàng)里面定義了幾個(gè)變量，用來確定是那個(gè)操作顯示的需要。

isAdd: false,isEdit: false,isView: false,isImport: false,

例如對(duì)應(yīng)編輯操作，我們是需要通過API處理類，獲取后端數(shù)據(jù)，并賦值給編輯框的表單對(duì)象上，進(jìn)行展示即可。

showEdit(id) { // 通過ID參數(shù)，使用API類獲取數(shù)據(jù)后，賦值給對(duì)象展示 var param = { id: id } GetProductDetail(param).then(data => { Object.assign(this.editForm, data); }) this.isEdit = true},

對(duì)于查看處理，我們除了在每行按鈕上可以單擊進(jìn)行查看指定行記錄外，我們雙擊指定的行，也應(yīng)該彈出對(duì)應(yīng)的查看記錄界面

rowDbclick(row, column) { var id = row.ID this.showView(id); },

這個(gè)就是表格定義里面的一些處理事件

<el-table v-loading='listLoading' :data='productlist' border fit stripe highlight-current-row :header-cell- @selection-change='selectionChange' @row-dblclick='rowDbclick' >

每個(gè)對(duì)話框的:visible的屬性值，則是確定哪個(gè)模態(tài)對(duì)話框的顯示和隱藏。

而對(duì)于刪除操作，我們只需要確認(rèn)一下，然后提交遠(yuǎn)端處理，返回正常結(jié)果，就提示用戶刪除成功即可。如下邏輯代碼所示。

showDelete(id) { this.$confirm(’您確認(rèn)刪除選定的記錄嗎?’, ’操作提示’,{ type: ’warning’ // success，error，info，warning // confirmButtonText: ’確定’, // cancelButtonText: ’取消’} ).then(() => {// 刪除操作處理代碼this.$message({ type: ’success’, message: ’刪除成功!’}); }).catch(() => {this.$message({ type: ’info’, message: ’已取消刪除’}); }); },

以上就是常規(guī)表格列表頁面查詢、列表展示、字段轉(zhuǎn)義的一些常規(guī)操作，以及對(duì)新增、編輯、查看、刪除操作的一些常規(guī)處理，通過對(duì)這些模型的操作，減少了我們以往重新獲取對(duì)應(yīng)DOM的繁瑣操作，是的數(shù)據(jù)的操作處理，變得方便了很多。

以上就是Vue Element前端應(yīng)用開發(fā)之表格列表展示的詳細(xì)內(nèi)容，更多關(guān)于Vue Element的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！