按部就班VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

在咱們開發BS頁面的時候，每每須要瞭解常規界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展現、彈出對話框、表單處理、條碼二維碼等等，本篇隨筆基於普通表格業務的展現錄入的場景介紹這些常規Element組件的使用，使得咱們對如何利用Element組件有一個大概的認識。

一、列表界面和其餘模塊展現處理

在前面隨筆《按部就班VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展現和字段轉義處理》介紹了基於列表展現了相關數據，並在列表界面整合了增刪改查等常規的業務操做處理。

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

對於常規按鈕、表格、分頁組件，前面已經作了相關的介紹，這裏就再也不贅述。

在介紹具體界面組件的時候，咱們先來了解下，總體的界面佈局，咱們把常規的列表界面，新增、編輯、查看、導入等界面放在一塊兒，除了列表頁面，其餘內容以彈出層對話框的方式進行處理，以下界面示意所示。

 每一個對話框的:visible的屬性值，則是肯定哪一個模態對話框的顯示和隱藏。

在Vue的JS模塊裏面，咱們除了定義對應的對話框顯示的變量外，對每一個對話框，咱們定義一個表單信息用來進行數據的雙向綁定處理。

 常規的新增、編輯、查看、導入等內容的定義，做爲一個對話框組件定義，常規的對話框組件的使用代碼以下所示。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>這是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

爲了控制對話框的樣式，咱們這裏注意下footer的slot，這個咱們通常是把處理按鈕放在這裏，如對於查看界面對話框，咱們定義以下所示。

  通常來講，對於表單內容比較多的場景，咱們通常分開多個選項卡進行展現或者錄入，這樣方便管理，查看界面總體效果以下所示。

 對於對話框的數據綁定，咱們在打開對話框前，先經過API模塊請求得到JSON數據，而後綁定在對應的對話框模型屬性上便可，如對於查看界面，咱們的處理邏輯以下所示。

    showView(id) {
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.viewForm, data);
      })
      this.isView = true
    },

對於表格的雙擊，咱們一樣綁定它的查看明細處理操做，以下模板代碼和JS代碼所示。

模板HTML代碼以下：

<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"
>

JS邏輯代碼以下　　

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

 

二、常規界面組件的使用

 通常狀況下，咱們使用界面組件的時候，參考下官網《Element組件使用》，尋找對應組件的代碼進行參考，就差很少了，這裏仍是就各類常規的Element組件進行大概的介紹吧。

1）表單和表單項、單文本框

對於表單，咱們通常定義一個對應的名稱，並設置它的data對應的模型名稱便可，以下所示。

<el-form ref="viewForm" :model="viewForm" label-width="80px">

而表單項，通常是定義好表單項的Label便可，而後在其中插入對應的錄入控件或者展現控件。如對於單文本組件使用，以下所示。

 <el-form-item label="產品編號">
   <el-input v-model="editForm.ProductNo" />
 </el-form-item>

其中 v-model="editForm.ProductNo"  就是對應綁定的數據。

而表單項，能夠添加對字段的驗證處理，在數據提交前，能夠校驗客戶的錄入是否有效等。

  <el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

注意這裏表單項，必須添加一個prop的屬性設置，如 prop="email" 所示。

通常爲了控制佈局，咱們還結合el-row進行一個佈局的處理，以下代碼所示（一行等於span爲24，span=12也就是一行放兩個控件組）。

<el-row>
  <el-col :span="12">
    <el-form-item label="產品編號">
      <el-input v-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="條碼">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

 

2）、下拉列表控件的綁定

下拉列表的綁定處理，也是經過 v-model 進行值的綁定，而選項則能夠經過數據列表進行綁定。

<el-form-item label="商品類型">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="請選擇">
    <el-option
      v-for="(item, key) in typeList"
      :key="key"
      :label="item.value"
      :value="item.key"
    />
  </el-select>
</el-form-item>

而選項中的 typeList，咱們能夠在頁面初始化的時候獲取出來便可。

  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()
      }
    });
  },

對於textarea常規的多行文本框，其實和普通單行文本框處理差很少，指定它的type="textarea" 和 rows的數值便可。

  <el-tab-pane label="說明" name="second">
    <el-form-item label="說明">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

而對於一些可能須要展現HTML內容的，咱們可使用DIV控件來展現，經過v-html標識來處理包含HTML代碼的內容。

  <el-tab-pane label="詳細說明">
    <el-form-item label="詳細說明">
      <div class="border-radius" v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

 

3）、圖片展現

對於一些須要展現服務器圖片，咱們請求後，根據Element圖片組件的設置處理便可，以下包括單個圖片和多個圖片的展現和預覽操做。

 圖片展現的代碼以下所示。

  <el-tab-pane label="圖片信息">
    <el-form-item label="封面圖片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Picture"
        :preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-item label="Banner圖片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Banner"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="商品展現圖片">
      <el-image
        v-for="item in viewForm.pics"
        :key="item.key"
        class="border-radius"
        :src="item.pic"
        style="width: 100px; height: 100px;padding:10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

上圖中，若是是單個圖片，那麼預覽咱們設置一個集合爲一個url便可，如 [viewForm.Banner]，若是是多個圖片，須要經過一個函數來獲取圖片列表，如 getPreviewPics() 函數所示。

    getPreviewPics() {
      // 轉換ViewForm.pics裏面的pic集合
      var list = []
      if (this.viewForm.pics) {
        this.viewForm.pics.forEach(item => {
          if (item.pic) {
            list.push(item.pic)
          }
        })
      }
      return list
    }

 

4）、第三方擴展控件

對於一些須要使用擴展組件的，咱們通常搜索下解決方案，經過npm安裝對應的組件便可解決，如對於條碼和二維碼，我使用 @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);

  

 富文本編輯，我這裏採用了 Tinymce 第三方組件來實現編輯處理，展現效果以下所示。

  代碼以下所示

  <el-tab-pane label="詳細說明" name="third">
    <el-form-item label="詳細說明">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

以上就是一些常規的界面組件的使用，後面在繼續介紹文件上傳和圖片結合的操做。

三、自定義組件的建立使用

使用Vue的比以往BS開發的好處，就是能夠很容易實現組件化，這點很好，一旦咱們定義好一個控件，就能夠在多個界面裏面進行使用，很是方便，並且封裝性能夠根據本身的須要進行處理。

查詢區域通常的界面效果以下所示，除了包含一些經常使用的查詢條件，通常會有一些下拉列表，這些多是後臺字典裏面綁定的內容，能夠考慮做爲一個通用的字典下拉列表組件來作。

其實界面錄入的時候，也每每須要這些條件下拉列表的。

  那麼咱們來定義一個自定義組件，並在界面上使用看看。

在Components目錄建立一個目錄，並建立一個組件的vue文件，命名爲my-dictdata.vue，以下所示。

 界面模板代碼咱們就一個select組件爲主便可。

<template>
  <el-select v-model="svalue" filterable clearable placeholder="請選擇">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    />
  </el-select>
</template>

script腳本邏輯代碼以下所示。

<script>
// 引入API模塊類方法
import { GetDictData } from '@/api/dictdata'

export default {
  name: 'MyDictdata', // 組件的名稱
  props: {
    typeName: { // 字典類型方式，從後端字典接口獲取數據
      type: String,
      default: ''
    },
    options: {// 固定列表方式，直接綁定
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dictItems: [], // 設置的字典列表
      svalue: '' // 選中的值
    }
  },
  watch: {
    // 判斷下拉框的值是否有改變
    svalue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.svalue);
      }
    }
  },
  mounted() {
    var that = this;

    if (this.typeName && this.typeName !== '') {
      // 使用字典類型，從服務器請求數據
      GetDictData(this.typeName).then(data => {
        if (data) {
          data.forEach(item => {
            if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
              that.dictItems.push(item)
            }
          });
        }
      })
    } else if (this.options && this.options.length > 0) {
      // 使用固定字典列表
      this.options.forEach(item => {
        if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
          that.dictItems.push(item)
        }
      });
    }
    // 設置默認值
    this.svalue = this.value;
  },
  methods: {

  }
}
</script>

主要就是處理字典數據的獲取，並綁定到模型對象上便可。

在頁面上使用前，須要引入咱們定義的組件

import myDictdata from '@/components/Common/my-dictdata'

而後包含進去components裏面便可

export default {
  components: { myDictdata },

那麼原來須要直接使用select組件的代碼

<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>

則能夠精簡爲一行代碼

<my-dictdata v-model="searchForm.ProductType" type-name="商品類型" />

而對於固定列表的，咱們也能夠通用的處理代碼

<my-dictdata v-model="searchForm.Status" :options="Status" />

其中Status是定義的一個對象集合

  Status: [
    { Text: '正常', Value: 0 },
    { Text: '推薦', Value: 1 },
    { Text: '停用', Value: 2 }
  ]

是否是很是方便，而獲得的效果則不變。

 

 以上就是多個頁面內容，經過對話框層模式整合在一塊兒，並介紹如何使用，以及對界面中常見的Element組件進行介紹如何使用，以及定義一個字典列表的主定義組件，用於簡化界面代碼使用，

 

列出如下前面幾篇隨筆的鏈接，供參考：

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

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

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

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

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