Vue Element前端應用開發之表格列表展示

在介紹任何代碼處理邏輯之前，我們先來做一個感官的認識，貼上一個效果圖，在逐一介紹其中處理的步驟和注意事項。

常規的列表展示界面，一般分為幾個區域，一個是查詢區域，一個是列表展示區域，一個是底部的分頁組件區域。查詢區域主要針對常規條件進行布局，以及增加一些全局或者批量的操作，如導入、導出、添加、批量添加、批量刪除等按鈕；而其中主體的列表展示區域，是相對比較復雜一點的地方，需要對各項數據進行比較友好的展示，可以結合Tag,圖標，按鈕等界面元素來展示，其中列表一般后面會包括一些對單行記錄處理的操作，如查看、編輯、刪除的操作，如果是批量刪除，可以放到頂部的按鈕區域。

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

對于查詢區域來說，它也是一個表單的處理，因此也需要添加一一個對應的對象來承載表單的數據，在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-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='狀態' prop='Status'> <el-select v-model='searchForm.Status' filterable clearable placeholder='請選擇'> <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()'>導入</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.listthis.pageinfo.total = data.total_countthis.listLoading = false }) },

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

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

先定義一個表格頭部，類似HTML里面的<table>的標簽，指定樣式和一些常規的操作函數，如下代碼所示。

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

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

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

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

接著就是根據返回JSON屬性，逐一進行內容轉換為表格列的展示過程了，如下所示。

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

我們如果需要在顯示里面增加處理效果，一般在template里面修改展示效果即可，如下是單位的處理，增加一個tag標志強調下。

<el-table-column 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 label='創建日期' 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 label='商品類型' 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- @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的資料請關注好吧啦網其它相關文章！