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

1、列表介面和其他模組展示處理

在前面隨筆《循序漸進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);
    },

2、常規介面元件的使用

 一般情況下，我們使用介面元件的時候，參考下官網《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>

以上就是一些常規的介面元件的使用，後面在繼續介紹檔案上傳和圖片結合的操作。

3、自定義元件的建立使用

使用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）--- 表格列表頁面的查詢，列表展示和欄位轉義處理

&n