目錄1、列表界面和其他模塊展示處理2、常規(guī)界面組件的使用1）表單和表單項(xiàng)、單文本框2）下拉列表控件的綁定3）圖片展示4）第三方擴(kuò)展控件3、自定義組件的創(chuàng)建使用1、列表界面和其他模塊展示處理

常規(guī)的列表展示界面，一般分為幾個(gè)區(qū)域，一個(gè)是查詢區(qū)域，一個(gè)是列表展示區(qū)域，一個(gè)是底部的分頁組件區(qū)域。查詢區(qū)域主要針對(duì)常規(guī)條件進(jìn)行布局，以及增加一些全局或者批量的操作，如導(dǎo)入、導(dǎo)出、添加、批量添加、批量刪除等按鈕；而其中主體的列表展示區(qū)域，是相對(duì)比較復(fù)雜一點(diǎn)的地方，需要對(duì)各項(xiàng)數(shù)據(jù)進(jìn)行比較友好的展示，可以結(jié)合Tag,圖標(biāo)，按鈕等界面元素來展示，其中列表一般后面會(huì)包括一些對(duì)單行記錄處理的操作，如查看、編輯、刪除的操作，如果是批量刪除，可以放到頂部的按鈕區(qū)域。

對(duì)于常規(guī)按鈕、表格、分頁組件，前面已經(jīng)做了相關(guān)的介紹，這里就不再贅述。

在介紹具體界面組件的時(shí)候，我們先來了解下，整體的界面布局，我們把常規(guī)的列表界面，新增、編輯、查看、導(dǎo)入等界面放在一起，除了列表頁面，其他內(nèi)容以彈出層對(duì)話框的方式進(jìn)行處理，如下界面示意所示。

每個(gè)對(duì)話框的:visible的屬性值，則是確定哪個(gè)模態(tài)對(duì)話框的顯示和隱藏。

在Vue的JS模塊里面，我們除了定義對(duì)應(yīng)的對(duì)話框顯示的變量外，對(duì)每個(gè)對(duì)話框，我們定義一個(gè)表單信息用來進(jìn)行數(shù)據(jù)的雙向綁定處理。

常規(guī)的新增、編輯、查看、導(dǎo)入等內(nèi)容的定義，作為一個(gè)對(duì)話框組件定義，常規(guī)的對(duì)話框組件的使用代碼如下所示。

<el-dialog :visible.sync='dialogVisible' :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>

為了控制對(duì)話框的樣式，我們這里注意下footer的slot，這個(gè)我們一般是把處理按鈕放在這里，如對(duì)于查看界面對(duì)話框，我們定義如下所示。

一般來說，對(duì)于表單內(nèi)容比較多的場(chǎng)景，我們一般分開多個(gè)選項(xiàng)卡進(jìn)行展示或者錄入，這樣方便管理，查看界面整體效果如下所示。

對(duì)于對(duì)話框的數(shù)據(jù)綁定，我們?cè)诖蜷_對(duì)話框前，先通過API模塊請(qǐng)求獲得JSON數(shù)據(jù)，然后綁定在對(duì)應(yīng)的對(duì)話框模型屬性上即可，如對(duì)于查看界面，我們的處理邏輯如下所示。

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

對(duì)于表格的雙擊，我們同樣綁定它的查看明細(xì)處理操作，如下模板代碼和JS代碼所示。

模板HTML代碼如下：

<el-table v-loading='listLoading' :data='productlist' border fit stripe highlight-current-row :header-cell- @selection-change='selectionChange' @row-dblclick='rowDbclick'>

JS邏輯代碼如下

rowDbclick(row, column) { var id = row.ID this.showView(id); },2、常規(guī)界面組件的使用

一般情況下，我們使用界面組件的時(shí)候，參考下官網(wǎng)《Element組件使用》，尋找對(duì)應(yīng)組件的代碼進(jìn)行參考，就差不多了，這里還是就各種常規(guī)的Element組件進(jìn)行大概的介紹吧。

1）表單和表單項(xiàng)、單文本框

對(duì)于表單，我們一般定義一個(gè)對(duì)應(yīng)的名稱，并設(shè)置它的data對(duì)應(yīng)的模型名稱即可，如下所示。

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

而表單項(xiàng)，一般是定義好表單項(xiàng)的Label即可，然后在其中插入對(duì)應(yīng)的錄入控件或者展示控件。如對(duì)于單文本組件使用，如下所示。

<el-form-item label='產(chǎn)品編號(hào)'> <el-input v-model='editForm.ProductNo' /> </el-form-item>

其中 v-model='editForm.ProductNo' 就是對(duì)應(yīng)綁定的數(shù)據(jù)。

而表單項(xiàng)，可以添加對(duì)字段的驗(yàn)證處理，在數(shù)據(jù)提交前，可以校驗(yàn)客戶的錄入是否有效等。

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

注意這里表單項(xiàng)，必須添加一個(gè)prop的屬性設(shè)置，如prop='email' 所示。

一般為了控制布局，我們還結(jié)合el-row進(jìn)行一個(gè)布局的處理，如下代碼所示（一行等于span為24，span=12也就是一行放兩個(gè)控件組）。

<el-row> <el-col :span='12'> <el-form-item label='產(chǎn)品編號(hào)'> <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 進(jìn)行值的綁定，而選項(xiàng)則可以通過數(shù)據(jù)列表進(jìn)行綁定。

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

而選項(xiàng)中的typeList，我們可以在頁面初始化的時(shí)候獲取出來即可。

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

對(duì)于textarea常規(guī)的多行文本框，其實(shí)和普通單行文本框處理差不多，指定它的type='textarea' 和 rows的數(shù)值即可。

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

而對(duì)于一些可能需要展示HTML內(nèi)容的，我們可以使用DIV控件來展示，通過v-html標(biāo)識(shí)來處理包含HTML代碼的內(nèi)容。

<el-tab-pane label='詳細(xì)說明'> <el-form-item label='詳細(xì)說明'> <div v-html='viewForm.Note' /> </el-form-item> </el-tab-pane>3）圖片展示

對(duì)于一些需要展示服務(wù)器圖片，我們請(qǐng)求后，根據(jù)Element圖片組件的設(shè)置處理即可，如下包括單個(gè)圖片和多個(gè)圖片的展示和預(yù)覽操作。

圖片展示的代碼如下所示。

<el-tab-pane label='圖片信息'> <el-form-item label='封面圖片'> <el-image :src='http://www.gepszalag.com/bcjs/viewForm.Picture':preview-src-list='[viewForm.Picture]' /> </el-form-item> <el-form-item label='Banner圖片'> <el-image :src='http://www.gepszalag.com/bcjs/viewForm.Banner':preview-src-list='[viewForm.Banner]' /> </el-form-item> <el-form-item label='商品展示圖片'> <el-imagev-for='item in viewForm.pics':key='item.key' :src='http://www.gepszalag.com/bcjs/item.pic' :preview-src-list='getPreviewPics()' /> </el-form-item> </el-tab-pane>

上圖中，如果是單個(gè)圖片，那么預(yù)覽我們?cè)O(shè)置一個(gè)集合為一個(gè)url即可，如[viewForm.Banner]，如果是多個(gè)圖片，需要通過一個(gè)函數(shù)來獲取圖片列表，如getPreviewPics() 函數(shù)所示。

getPreviewPics() { // 轉(zhuǎn)換ViewForm.pics里面的pic集合 var list = [] if (this.viewForm.pics) {this.viewForm.pics.forEach(item => { if (item.pic) { list.push(item.pic) }}) } return list }4）第三方擴(kuò)展控件

對(duì)于一些需要使用擴(kuò)展組件的，我們一般搜索下解決方案，通過npm安裝對(duì)應(yīng)的組件即可解決，如對(duì)于條碼和二維碼，我使用@chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，一般在Github上搜索下關(guān)鍵字，總能找到一些很受歡迎的第三方組件。

安裝這些組件都有具體的說明，如下所示(如果卸載，直接修改install為uninstall即可）。

npm install @chenfengyuan/vue-barcode vue

以及

npm install @chenfengyuan/vue-qrcode vue

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

如果全局引入barcode和qrcode 組件，我們?cè)趍ain.js里面引入即可，如下代碼所示

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

富文本編輯，我這里采用了Tinymce 第三方組件來實(shí)現(xiàn)編輯處理，展示效果如下所示。

代碼如下所示

<el-tab-pane label='詳細(xì)說明' name='third'> <el-form-item label='詳細(xì)說明'> <tinymce v-model='editForm.Note' : /> </el-form-item> </el-tab-pane>

以上就是一些常規(guī)的界面組件的使用，后面在繼續(xù)介紹文件上傳和圖片結(jié)合的操作。

3、自定義組件的創(chuàng)建使用

使用Vue的比以往BS開發(fā)的好處，就是可以很容易實(shí)現(xiàn)組件化，這點(diǎn)很好，一旦我們定義好一個(gè)控件，就可以在多個(gè)界面里面進(jìn)行使用，非常方便，而且封裝性可以根據(jù)自己的需要進(jìn)行處理。

查詢區(qū)域一般的界面效果如下所示，除了包含一些常用的查詢條件，一般會(huì)有一些下拉列表，這些可能是后臺(tái)字典里面綁定的內(nèi)容，可以考慮作為一個(gè)通用的字典下拉列表組件來做。

其實(shí)界面錄入的時(shí)候，也往往需要這些條件下拉列表的。

那么我們來定義一個(gè)自定義組件，并在界面上使用看看。

在Components目錄創(chuàng)建一個(gè)目錄，并創(chuàng)建一個(gè)組件的vue文件，命名為my-dictdata.vue，如下所示。

界面模板代碼我們就一個(gè)select組件為主即可。

<template> <el-select v-model='svalue' filterable clearable placeholder='請(qǐng)選擇'> <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: { // 字典類型方式，從后端字典接口獲取數(shù)據(jù) type: String, default: ’’ }, options: {// 固定列表方式，直接綁定 type: Array, default: () => { return [] } } }, data() { return { dictItems: [], // 設(shè)置的字典列表 svalue: ’’ // 選中的值 } }, watch: { // 判斷下拉框的值是否有改變 svalue(val, oldVal) { if (val !== oldVal) {this.$emit(’input’, this.svalue); } } }, mounted() { var that = this; if (this.typeName && this.typeName !== ’’) { // 使用字典類型，從服務(wù)器請(qǐng)求數(shù)據(jù) 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)} }); } // 設(shè)置默認(rèn)值 this.svalue = this.value; }, methods: { }}</script>

主要就是處理字典數(shù)據(jù)的獲取，并綁定到模型對(duì)象上即可。

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

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

然后包含進(jìn)去components里面即可

export default { components: { myDictdata },

那么原來需要直接使用select組件的代碼

<el-select v-model='searchForm.ProductType' filterable clearable placeholder='請(qǐng)選擇'> <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='商品類型' />

而對(duì)于固定列表的，我們也可以通用的處理代碼

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

其中Status是定義的一個(gè)對(duì)象集合

Status: [ { Text: ’正?！? Value: 0 }, { Text: ’推薦’, Value: 1 }, { Text: ’停用’, Value: 2 } ]

是不是非常方便，而得到的效果則不變。

以上就是多個(gè)頁面內(nèi)容，通過對(duì)話框?qū)幽Ｊ秸显谝黄?，并介紹如何使用，以及對(duì)界面中常見的Element組件進(jìn)行介紹如何使用，以及定義一個(gè)字典列表的主定義組件，用于簡化界面代碼使用

以上就是Vue Element前端應(yīng)用開發(fā)之常規(guī)Element界面組件的詳細(xì)內(nèi)容，更多關(guān)于Vue Element常規(guī)Element界面組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！