|
在我們一般開發(fā)的系統(tǒng)界面里面，列表頁面是一個(gè)非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁處理，以及對每項(xiàng)列表內(nèi)容可能進(jìn)行的轉(zhuǎn)義處理，本篇隨筆介紹基于Vue +Element基礎(chǔ)上實(shí)現(xiàn)表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理。 在前面隨筆《循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(4）--- 獲取后端數(shù)據(jù)及產(chǎn)品信息頁面的處理》介紹了一個(gè)對產(chǎn)品列表的卡片式圖片分頁展示處理，其中涉及到了對于Element 組件分頁控件的操作，本篇隨筆繼續(xù)深化這一組件的使用，結(jié)合表格展示來處理效果展示。 1、列表查詢界面效果在介紹任何代碼處理邏輯之前，我們先來做一個(gè)感官的認(rèn)識，貼上一個(gè)效果圖，在逐一介紹其中處理的步驟和注意事項(xiàng)。
常規(guī)的列表展示界面，一般分為幾個(gè)區(qū)域，一個(gè)是查詢區(qū)域，一個(gè)是列表展示區(qū)域，一個(gè)是底部的分頁組件區(qū)域。查詢區(qū)域主要針對常規(guī)條件進(jìn)行布局，以及增加一些全局或者批量的操作，如導(dǎo)入、導(dǎo)出、添加、批量添加、批量刪除等按鈕；而其中主體的列表展示區(qū)域，是相對比較復(fù)雜一點(diǎn)的地方，需要對各項(xiàng)數(shù)據(jù)進(jìn)行比較友好的展示，可以結(jié)合Tag,圖標(biāo)，按鈕等界面元素來展示，其中列表一般后面會(huì)包括一些對單行記錄處理的操作，如查看、編輯、刪除的操作，如果是批量刪除，可以放到頂部的按鈕區(qū)域。
2、查詢區(qū)域的處理查詢區(qū)域一般的界面效果如下所示，除了包含一些常用的查詢條件，并增加一些常規(guī)的處理按鈕，如查詢、重置、新增、批量刪除、導(dǎo)入、導(dǎo)出等按鈕。
對于查詢區(qū)域來說，它也是一個(gè)表單的處理，因此也需要添加一一個(gè)對應(yīng)的對象來承載表單的數(shù)據(jù)，在data里面增加一個(gè)searchForm的模型對象，以及一個(gè)用于分頁查詢的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="產(chǎn)品編號" 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="請選擇"> <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="狀態(tài)" 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()">導(dǎo)入</el-button> </el-row> 其中產(chǎn)品類型的是下拉列表，我們通過在data區(qū)域獲取一個(gè)對象，并在此遍歷可以展示字典內(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)換為對應(yīng)屬性 Object.assign(param, this.searchForm); // 獲取產(chǎn)品列表，綁定到模型上，并修改分頁數(shù)量 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); 語句處理，是把獲得的查詢條件，覆蓋原來對象里面的屬性，從而實(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-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" > 具體的屬性可以參考下Element組件關(guān)于表格控件的屬性了，在表格列里面，我們主要關(guān)注它的data綁定即可。 接著定義一列復(fù)選框選擇的列，用于批量處理的勾選，如批量刪除操作。 <el-table-column type="selection" width="55"/> 接著就是根據(jù)返回JSON屬性，逐一進(jìn)行內(nèi)容轉(zhuǎn)換為表格列的展示過程了，如下所示。 <el-table-column label="商品編號" 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 align="center" label="單位" width="80"> <template slot-scope="scope"> <el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag> </template> </el-table-column>
而對于一些需要判斷處理的效果，我們可以對內(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>
另外，對于一些常見的日期處理，我們可以使用Formatter，F(xiàn)ilter等手段進(jìn)行內(nèi)容的轉(zhuǎn)義處理，可以去掉后面的時(shí)間部分。 <el-table-column align="center" label="創(chuàng)建日期" width="120" 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' 對于類似需要進(jìn)行字典轉(zhuǎn)義的操作，我們可以使用Formatter的方式轉(zhuǎn)義，如增加一個(gè)函數(shù)來解析對應(yīng)的值為中文信息
效果可以使用Formatter來轉(zhuǎn)義 productTypeFormat(row, column, cellValue) { var display = this.productTypes.get(cellValue) return display || '' }, 也可以使用Filter模式來進(jìn)行處理。 這里介紹使用Filter的操作處理，首先在界面HTML代碼里面增加對應(yīng)的操作，如下代碼所示。 <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其實(shí)就是一個(gè) | 過濾符號，以及接著一個(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的引用，如下代碼所示。
對于操作按鈕，我們需要增加一行來顯示幾個(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主要就是做一些彈出層前的處理操作，我們在data項(xiàng)里面定義了幾個(gè)變量，用來確定是那個(gè)操作顯示的需要。 isAdd: false, isEdit: false, isView: false, isImport: false, 例如對應(yīng)編輯操作，我們是需要通過API處理類，獲取后端數(shù)據(jù)，并賦值給編輯框的表單對象上，進(jìn)行展示即可。 showEdit(id) { // 通過ID參數(shù)，使用API類獲取數(shù)據(jù)后，賦值給對象展示 var param = { id: id } GetProductDetail(param).then(data => { Object.assign(this.editForm, data); }) this.isEdit = true }, 對于查看處理，我們除了在每行按鈕上可以單擊進(jìn)行查看指定行記錄外，我們雙擊指定的行，也應(yīng)該彈出對應(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-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" > 每個(gè)對話框的:visible的屬性值，則是確定哪個(gè)模態(tài)對話框的顯示和隱藏。
而對于刪除操作，我們只需要確認(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ī)操作，以及對新增、編輯、查看、刪除操作的一些常規(guī)處理，通過對這些模型的操作，減少了我們以往重新獲取對應(yīng)DOM的繁瑣操作，是的數(shù)據(jù)的操作處理，變得方便了很多。 為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考： 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(1）--- 開發(fā)環(huán)境的準(zhǔn)備工作 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(2）--- Vuex中的API、Store和View的使用 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(3）--- 動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(4）--- 獲取后端數(shù)據(jù)及產(chǎn)品信息頁面的處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(5）--- 表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(6）--- 常規(guī)Element 界面組件的使用 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(7）--- 介紹一些常規(guī)的JS處理函數(shù) 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(8）--- 樹列表組件的使用 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(9）--- 界面語言國際化的處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(10）--- 基于vue-echarts處理各種圖表展示 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(11）--- 圖標(biāo)的維護(hù)和使用 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(12）--- 整合ABP框架的前端登錄處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(13）--- 前端API接口的封裝處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(14）--- 根據(jù)ABP后端接口實(shí)現(xiàn)前端界面展示 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(15）--- 用戶管理模塊的處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(16）--- 組織機(jī)構(gòu)和角色管理模塊的處理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(17）--- 菜單管理 循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(18）--- 功能點(diǎn)管理及權(quán)限控制
|
|
|
