按部就班VUE+Element 前端應用開發(26）--- 各類界面組件的使用（2）

時間 2020-11-12

標籤 html 前端 vue node git github 數據庫 npm json 後端欄目 HTML 简体版

原文原文鏈接

在咱們使用Vue+Element開發前端的時候，每每涉及到不少界面組件的使用，其中不少直接採用Element官方的案例便可，有些則是在這個基礎上封裝更好利用、更少代碼的組件；另外有些則是直接採用第三方開發好的組件，目的就是實現所需功能外，儘可能簡化界面使用代碼。本篇隨筆介紹在個人項目中常常用到的各類界面組件和它的界面效果，以便在實際開發中進行相應的參考，提升開發效率。 html

本篇繼續上一篇隨筆《按部就班VUE+Element 前端應用開發(25）--- 各類界面組件的使用（1）》，對界面控件進行進一步的介紹。前端

七、樹列表及控件封裝

在不少數據展現場景中，都須要引入樹狀列表進行展現，包括無窮層級的樹列表，或者簡單的主從表關係，均可能用到樹列表的展現。vue

樹列表控件的使用，以前在隨筆中《按部就班VUE+Element 前端應用開發(8）--- 樹列表組件的使用》node

這些都是基於Element的樹形控件進行使用或封裝組件使用的界面。git

樹列表的簡單使用代碼以下所示。github

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

數據這是一個嵌套的列表對象便可，以下代碼所示數據庫

      treedata: [ // 初始化樹列表
        {
          label: '一級 1',
          children: [{
            label: '二級 1-1' }]
        }]

咱們只要根據實際狀況構建好這些數據給樹控件使用便可。通常樹形控件頂部會帶一個輸入框來進行鍵值查詢過濾的操做，以方便用戶快速檢索的。npm

若是設置有選擇框，獲得界面以下所示。json

主要設置 show-checkbox 和 @check-change="handleCheckChange" 便可。後端

界面代碼以下所示

<el-tree
  style="padding-top:10px"
  :data="treedata"
  node-key="id"
  default-expand-all
  highlight-current
  show-checkbox
  :default-checked-keys="['1-1-1']"
  @node-click="handleNodeClick"
  @check-change="handleCheckChange"
>
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>
      <i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
      {{ node.label }}
   &nbsp;&nbsp;
    </span>
  </span>
</el-tree>

有時候，咱們樹列表控件的數據可能來源於常規的二維表，以下數據格式所示。

var data = [
   {"id":1,"parent":0,"addr":"重慶"},
   {"id":11,"parent":1,"addr":"重慶"},
   {"id":12,"parent":1,"addr":"重慶"},
   {"id":121,"parent":12,"addr":"重慶"},
   {"id":2,"parent":0,"addr":"重慶"},
   {"id":21,"parent":2,"addr":"重慶"},
   {"id":211,"parent":21,"addr":"重慶"},
   {"id":3,"parent":0,"addr":"重慶"},
   {"id":4,"parent":0,"addr":"重慶"},
   {"id":31,"parent":3,"addr":"重慶"},
   {"id":32,"parent":3,"addr":"重慶"}
];

而樹控件使用的data 則是嵌套數據，咱們若是每次使用都須要爲它們專門作一個函數有點多餘，咱們能夠用前端轉換的方式來實現樹數據的轉換。

具體操做能夠參考：https://blog.csdn.net/unamattin/article/details/77152451

//二維列表轉樹形控件所需嵌套數據格式
export function getJsonTree(data, config) {
  const id = config.id || 'id'; const pid = config.pid || 'pid';
  const children = config.children || 'children';
  const label = config.label || 'name';// 默認label爲name字段

  const idMap = []; const jsonTree = [];
  data.forEach(function(v) {
    idMap[v[id]] = v;
  });
  data.forEach(function(v) {
    const parent = idMap[v[pid]];
    if (parent) {
      !parent[children] && (parent[children] = []);
      parent[children].push(v);
    } else {
      jsonTree.push(v);
    }
  });

  // treeAddIcon(jsonTree, label);// 循環遍歷給tree加圖標
  return jsonTree;
}

這樣樹列表的綁定操做以下代碼所示。

    getTree() { // 樹列表數據獲取
      var param = {
        SkipCount: 0,
        MaxResultCount: 1000
      }
      category.GetAll(param).then(data => {
        this.treedata = [];// 樹列表清空
        var list = data.result.items
        if (list) {
          // console.log(list)
          // 使用getJsonTree函數，實現對二維錶轉換爲嵌套樹對象集合
          var newTreedata = getJsonTree(list, {
            id: 'id',
            pid: 'pid',
            children: 'children',
            label: 'categoryName'
          });
          // console.log(newTreedata)
          this.treedata = newTreedata
        }
      });
    },

順便說一下，因爲引入一些原始控件須要實現不少相應的操做，通常狀況下，咱們能夠把樹控件常規的處理封裝成一個組件的方式使用，其中包括了常規的過濾、選中等操做處理。以下是咱們簡單封裝的樹控件的自定義組件，用於處理常規的樹列表信息。

這樣使用起來，界面代碼減小不少，只須要實現對應的事件便可。

<myTree :data="treedata" :default-expand-all="false" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />

另外，更高維度上，咱們還能夠把業務界面按模塊分離出來，實現不一樣的界面的組裝，這樣能夠減輕代碼的臃腫程度，提升代碼可讀性。

如以前說過的機構信息，頁面邏輯比較多，能夠簡化爲各個不一樣的模塊，而後拼裝組件便可。

例如：對於權限系統中的每一個角色，除了包含基本信息外，還會包含擁有的權限（功能控制點）、包含用戶，以及擁有的菜單，其中權限是用來控制界面元素，如操做按鈕的顯示的，而擁有的菜單，則是用戶以指定帳號登陸系統後，得到對應角色的菜單，而後構建對應的訪問入口的。角色界面模塊UML類圖以下所示。

那麼對應界面元素上，咱們就應該以不一樣的Tab來展現這些信息，每一個Tab內容部分就能夠做爲一個獨立的界面組件來開發。

八、按鈕及按鈕組

按鈕比較經常使用，通常咱們依照常規的方式使用，並設置樣式便可。

代碼以下所示

<el-row>
  <el-button>默認按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success">成功按鈕</el-button>
  <el-button type="info">信息按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>
</el-row>

<el-row>
  <el-button plain>樸素按鈕</el-button>
  <el-button type="primary" plain>主要按鈕</el-button>
  <el-button type="success" plain>成功按鈕</el-button>
  <el-button type="info" plain>信息按鈕</el-button>
  <el-button type="warning" plain>警告按鈕</el-button>
  <el-button type="danger" plain>危險按鈕</el-button>
</el-row>

<el-row>
  <el-button round>圓角按鈕</el-button>
  <el-button type="primary" round>主要按鈕</el-button>
  <el-button type="success" round>成功按鈕</el-button>
  <el-button type="info" round>信息按鈕</el-button>
  <el-button type="warning" round>警告按鈕</el-button>
  <el-button type="danger" round>危險按鈕</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

我在以前的界面中採用的按鈕樣式以下所示。

後來我以爲把按鈕組合起來更好看，也更節省空間。

這裏其實就是使用了按鈕組的做用。

    <!--功能操做按鈕 -->
    <el-row style="float:right;padding-bottom:10px">
      <el-button-group>
        <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查詢</el-button>
        <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button>
      </el-button-group>
      <el-button-group>
        <el-button icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button>
        <el-button icon="el-icon-document-remove" type="danger" size="mini" round :disabled="listSelection.length === 0" @click="batchDelete()">批量刪除</el-button>
      </el-button-group>
      <el-button-group>
        <el-button icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">導入</el-button>
        <el-button icon="el-icon-download" :loading="downloadLoading" type="primary" size="mini" round @click="handleDownload()">導出</el-button>
      </el-button-group>
    </el-row>

九、表格控件的使用

表格控件是咱們展現數據庫二維表內容的重要承載，通常在主列表頁面中展現表格數據。

表格控件的使用也比較簡單，簡單案例的代碼所示。

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

但每每咱們處理表格列的各類內容承載的時候，須要豐富不少，如包括標籤、Switch開關，按鈕操做、日期格式化、內容轉換等操做。

如標籤列，能夠進行循環處理。

      <el-table-column align="center" label="標籤" width="100">
        <template slot-scope="scope">
          <el-tag
            v-for="tag in scope.row.tags.split(',')"
            :key="tag"
            type="primary"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>

或者結合過濾器進行處理。

      <el-table-column align="center" label="狀態">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.state === 0) ? 'success' : 'danger'" effect="dark">
            {{ scope.row.state | stateFilter }}</el-tag>
        </template>
      </el-table-column>

日期，咱們也用日期過濾器實現轉換。

<el-table-column align="center" label="建立時間" width="160" prop="creationTime" :formatter="timeFormat" />

表格的操做列，整個對單個記錄操做的各類操做入口。

      <!--表格行操做按鈕 -->
      <el-table-column align="center" label="操做" width="110">
        <template scope="scope">
          <el-row>
            <el-button-group>
              <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-button-group>
          </el-row>
        </template>
      </el-table-column>

若是是開關操做，咱們也能夠結合一塊兒展現和操做處理。

操做代碼以下所示

          <el-table-column align="center" label="狀態">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status==0 ? 'success' : 'warning'" effect="dark">
                {{ scope.row.status==0 ? '正常' : '停用' }}
              </el-tag>
              <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="changeStatus(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>

另外表格數據，通常還涉及到Excel的導出操做，這個實際上是採用了SheetJS的處理方式草操做XLSX的方式導出Excel的，這裏引用了前人開發的Export2Excel 組件進行處理。

    handleDownload() { // 導出Excel文件
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['父ID', '分類編碼', '分類名稱', '分類描述', '分類圖片封面', '分類圖標', '排序', '狀態']
        const filterVal = ['pid', 'categoryCode', 'categoryName', 'note', 'pictureUrl', 'icon', 'sortCode', 'status']

        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '商品分類',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'creationTime') {
          return this.parseTime(v[j], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          return v[j]
        }
      }))
    },

通常來講，Element的表格控件已經具備很是豐富的功能了，包括固定行列、展開行、懶加載數據、多級表頭、排序篩選、自定義列、合計行列等操做，

若是有須要直接編輯表格數據的操做，建議能夠採用第三方表格組件來實現：https://github.com/huangshuwei/vue-easytable

十、樹形下拉列表框及封裝

除了常規的樹列表展現內容外，咱們也須要一個在下拉列表中展現樹內容的界面組件。

這裏又得引入一個第三方的界面組件，所以Element的Select組件不支持樹列表。

GitHub地址：https://github.com/riophae/vue-treeselect

官網地址：https://vue-treeselect.js.org/

常規的界面代碼以下使用

<treeselect v-model="value" :multiple="true" :options="options" />

複雜一點的使用界面代碼，能夠指定更多的屬性設置，以及處理事件操做。

<treeselect
  v-model="value"
  :options="treedata"
  :multiple="true"
  :flat="true"
  :default-expand-level="Infinity"
  :open-on-click="true"
  :open-on-focus="true"
  clearable
  :max-height="200"
/>

這裏的options就是樹控件的數據，是一個嵌套結構的列表對象

 options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          } ],

另外，有時候咱們可能在樹選擇框中須要用來設置父級列表的處理，因爲這個業務比較常見，並且邏輯相對比較通用，那麼咱們能夠考慮把它封裝爲一個組件的方式，而後再在界面上使用。

界面使用效果以下所示

這樣勾選【做爲頂級目錄項】，那麼則會自動置空內容，也就是父ID爲空了，若是選擇具體的樹節點，那麼就以該節點的ID做爲PID，這樣操做把調用界面處理的邏輯簡化了，更方便使用。

  <el-col :span="24">
    <el-form-item label="父項名稱" prop="pid">
      <MyTreeselectTop v-model="addForm.pid" :options="treedata" />
    </el-form-item>
  </el-col>

這樣咱們能夠在多處使用這個帶有樹列表展現，以及設置頂級節點的樹列表框選擇控件了，如在批量錄入商品分類的操做界面中同樣使用。

十一、其餘組件

組件不可能一一介紹完，通常狀況下，咱們依照咱們的數據展現須要，引入不一樣的界面組件，通常能夠在GitHub上找到不少對比，找適合本身的且評分較高的便可。

如條碼和二維碼組件，我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，通常在Github上搜索下關鍵字，總能找到一些很受歡迎的第三方組件。

安裝這些組件都有具體的說明，以下所示(若是卸載，直接修改install爲uninstall便可）。

npm install @chenfengyuan/vue-barcode vue

以及

npm install @chenfengyuan/vue-qrcode vue

條碼和二維碼的展現效果以下所示

若是全局引入barcode和qrcode 組件，咱們在main.js裏面引入便可，以下代碼所示

// 引入barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueBarcode.name, VueBarcode);

圖表組件，咱們這裏使用了基於vue-echarts組件模塊來處理各類圖表vue-echarts是對echarts圖表組件的封裝。

首先使用npm 安裝vue-echarts組件。

git地址：https://github.com/ecomfe/vue-echarts

NPM安裝命令

npm install echarts vue-echarts

而後在對應模塊頁面裏面引入對應的組件對象，以下代碼所示。

import ECharts from 'vue-echarts' // 主圖表對象
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示信息

在Vue模塊頁面的Template 裏面，咱們定義界面代碼以下便可。

<v-chart
  ref="simplebar"
  :options="simplebar"
  autoresize
/>

而後在data裏面爲它準備好數據便可，以下代碼所示。

 data() {
    return {
      simplebar: {
        title: { text: '柱形圖Demo' },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  }

詳細能夠參考個人隨筆：《按部就班VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各類圖表展現》

綜上這些界面控件的使用原則，原則上常常重用的部分，能夠把它簡單化包裝爲一個組件，這樣能夠減小不少界面代碼和常規的處理JS函數，若是更高維度上還有抽離邏輯的可能呢，如我以前在角色、機構模塊裏面處理不少公用邏輯界面同樣，咱們把這些抽離出來做爲一個組件模塊，加上一些特殊的開關或者屬性設置變量，就能夠響應不一樣界面上的操做。

還有就是這些界面組件的使用，咱們不可能一一的記住，那麼使用合適的代碼生成工具來處理就會跟提升效率了，代碼生成工具，通常會根據字段的數據類型，名稱等信息，進行不一樣的處理，把常規的列表界面、查看、編輯、新增、導入、導入等界面和功能處理函數整合一塊兒生成，咱們在這個基礎上進行微調修改，效率更高。

咱們的代碼生成工具Database2sharp，專門爲優化過的框架結構進行代碼生成，在界面工具欄或者菜單中選擇【代碼生成】【ABP的Vue+Element界面代碼】，以下所示。

接着在出來的對話框上選擇對應數據庫和表進行生成，一步步執行便可。

使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面，可以使得咱們提升代碼的開發效率，以及下降出錯的機會，同時能夠很好的統一整套界面的界面樣式和作法，事半功倍。

生成的列表界面，包括查詢、表格、分頁等信息，查詢框中包含一些關鍵字段的信息查詢，而表格中則包含重要字段信息的展現或者相關操做。

而後編輯界面，簡單的以下所示。

爲了方便讀者理解，我列出一下前面幾篇隨筆的鏈接，供參考：

按部就班VUE+Element 前端應用開發(1）--- 開發環境的準備工做

按部就班VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理

按部就班VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理

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