按部就班VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展現和字段轉義處理

時間  2020-06-02
標籤 按部就班 vue+element vue element 前端 應用 開發 表格 列表 頁面 查詢 展現 字段 轉義 處理 简体版
原文   原文鏈接

在咱們通常開發的系統界面裏面，列表頁面是一個很是重要的綜合展現界面，包括有條件查詢、列表展現和分頁處理，以及對每項列表內容可能進行的轉義處理，本篇隨筆介紹基於Vue +Element基礎上實現表格列表頁面的查詢，列表展現和字段轉義處理。html

在前面隨筆《按部就班VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理》介紹了一個對產品列表的卡片式圖片分頁展現處理，其中涉及到了對於Element 組件分頁控件的操做，本篇隨筆繼續深化這一組件的使用，結合表格展現來處理效果展現。前端

一、列表查詢界面效果

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

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

 

二、查詢區域的處理

查詢區域通常的界面效果以下所示，除了包含一些經常使用的查詢條件，並增長一些常規的處理按鈕，如查詢、重置、新增、批量刪除、導入、導出等按鈕。函數

  對於查詢區域來講，它也是一個表單的處理，所以也須要添加一一個對應的對象來承載表單的數據，在data裏面增長一個searchForm的模型對象，以及一個用於分頁查詢的pageinfo對象，以下代碼所示。佈局

export default {
  data() {
    return {
      listLoading: true,
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      searchForm: {
        ProductNo: '',
        BarCode: '',
        ProductType: '',
        ProductName: '',
        Status: 0
      },

視圖模板代碼以下所示post

    <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值，就能夠綁定下拉列表了，這個稍後在細講。ui

在Vue的腳本處理邏輯裏面，咱們能夠在Created聲明週期裏面，經過API獲取數據，綁定在模型上，界面就會自動進行更新了，處理過程代碼以下所示。this

  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); 語句處理，是把得到的查詢條件，覆蓋原來對象裏面的屬性，從而實現查詢條件的變量賦值。url

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

  先定義一個表格頭部，相似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）--- 獲取後端數據及產品信息頁面的處理

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程