Vue Element前端應(yīng)用開(kāi)發(fā)之常規(guī)Element界面組件
1、列表界面和其他模塊展示處理
常規(guī)的列表展示界面，一般分為幾個(gè)區(qū)域，一個(gè)是查詢區(qū)域，一個(gè)是列表展示區(qū)域，一個(gè)是底部的分頁(yè)組件區(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)，按鈕等界面元素來(lái)展示，其中列表一般后面會(huì)包括一些對(duì)單行記錄處理的操作，如查看、編輯、刪除的操作，如果是批量刪除，可以放到頂部的按鈕區(qū)域。
對(duì)于常規(guī)按鈕、表格、分頁(yè)組件，前面已經(jīng)做了相關(guān)的介紹，這里就不再贅述。
在介紹具體界面組件的時(shí)候，我們先來(lái)了解下，整體的界面布局，我們把常規(guī)的列表界面，新增、編輯、查看、導(dǎo)入等界面放在一起，除了列表頁(yè)面，其他內(nèi)容以彈出層對(duì)話框的方式進(jìn)行處理，如下界面示意所示。
每個(gè)對(duì)話框的:visible的屬性值，則是確定哪個(gè)模態(tài)對(duì)話框的顯示和隱藏。
在Vue的JS模塊里面，我們除了定義對(duì)應(yīng)的對(duì)話框顯示的變量外，對(duì)每個(gè)對(duì)話框，我們定義一個(gè)表單信息用來(lái)進(jìn)行數(shù)據(jù)的雙向綁定處理。
常規(guī)的新增、編輯、查看、導(dǎo)入等內(nèi)容的定義，作為一個(gè)對(duì)話框組件定義，常規(guī)的對(duì)話框組件的使用代碼如下所示。
<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>
為了控制對(duì)話框的樣式，我們這里注意下footer的slot，這個(gè)我們一般是把處理按鈕放在這里，如對(duì)于查看界面對(duì)話框，我們定義如下所示。
一般來(lái)說(shuō)，對(duì)于表單內(nèi)容比較多的場(chǎng)景，我們一般分開(kāi)多個(gè)選項(xiàng)卡進(jìn)行展示或者錄入，這樣方便管理，查看界面整體效果如下所示。
對(duì)于對(duì)話框的數(shù)據(jù)綁定，我們?cè)诖蜷_(kāi)對(duì)話框前，先通過(guò)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-style="{background:'#eef1f6',color:'#606266'}"
@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）下拉列表控件的綁定
下拉列表的綁定處理，也是通過(guò)v-model 進(jìn)行值的綁定，而選項(xiàng)則可以通過(guò)數(shù)據(jù)列表進(jìn)行綁定。
<el-form-item label="商品類(lèi)型">
<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，我們可以在頁(yè)面初始化的時(shí)候獲取出來(lái)即可。
created() {
// 獲取產(chǎn)品類(lèi)型，用于綁定字典等用途
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="說(shuō)明" name="second">
<el-form-item label="說(shuō)明">
<el-input v-model="editForm.Description" type="textarea" :rows="10" />
</el-form-item>
</el-tab-pane>
而對(duì)于一些可能需要展示HTML內(nèi)容的，我們可以使用DIV控件來(lái)展示，通過(guò)v-html標(biāo)識(shí)來(lái)處理包含HTML代碼的內(nèi)容。
<el-tab-pane label="詳細(xì)說(shuō)明">
<el-form-item label="詳細(xì)說(shuō)明">
<div class="border-radius" 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
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>
上圖中，如果是單個(gè)圖片，那么預(yù)覽我們?cè)O(shè)置一個(gè)集合為一個(gè)url即可，如[viewForm.Banner]，如果是多個(gè)圖片，需要通過(guò)一個(gè)函數(shù)來(lái)獲取圖片列表，如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ò)展組件的，我們一般搜索下解決方案，通過(guò)npm安裝對(duì)應(yīng)的組件即可解決，如對(duì)于條碼和二維碼，我使用@chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，一般在Github上搜索下關(guān)鍵字，總能找到一些很受歡迎的第三方組件。
安裝這些組件都有具體的說(shuō)明，如下所示(如果卸載，直接修改install為uninstall即可）。
npm install @chenfengyuan/vue-barcode vue
以及
npm install @chenfengyuan/vue-qrcode vue
條碼和二維碼的展示效果如下所示
如果全局引入barcode和qrcode 組件，我們?cè)趍ain.js里面引入即可，如下代碼所示
// 引入barcode,qrcode import VueBarcode from '@chenfengyuan/vue-barcode'; import VueQrcode from '@chenfengyuan/vue-qrcode'; Vue.component(VueBarcode.name, VueBarcode);
富文本編輯，我這里采用了Tinymce 第三方組件來(lái)實(shí)現(xiàn)編輯處理，展示效果如下所示。
代碼如下所示
<el-tab-pane label="詳細(xì)說(shuō)明" name="third">
<el-form-item label="詳細(xì)說(shuō)明">
<tinymce v-model="editForm.Note" :height="300" />
</el-form-item>
</el-tab-pane>
以上就是一些常規(guī)的界面組件的使用，后面在繼續(xù)介紹文件上傳和圖片結(jié)合的操作。
3、自定義組件的創(chuàng)建使用
使用Vue的比以往BS開(kāi)發(fā)的好處，就是可以很容易實(shí)現(xiàn)組件化，這點(diǎn)很好，一旦我們定義好一個(gè)控件，就可以在多個(gè)界面里面進(jìn)行使用，非常方便，而且封裝性可以根據(jù)自己的需要進(jìn)行處理。
查詢區(qū)域一般的界面效果如下所示，除了包含一些常用的查詢條件，一般會(huì)有一些下拉列表，這些可能是后臺(tái)字典里面綁定的內(nèi)容，可以考慮作為一個(gè)通用的字典下拉列表組件來(lái)做。
其實(shí)界面錄入的時(shí)候，也往往需要這些條件下拉列表的。
那么我們來(lái)定義一個(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模塊類(lèi)方法
import { GetDictData } from '@/api/dictdata'
export default {
name: 'MyDictdata', // 組件的名稱
props: {
typeName: { // 字典類(lèi)型方式，從后端字典接口獲取數(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 !== '') {
// 使用字典類(lèi)型，從服務(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ì)象上即可。
在頁(yè)面上使用前，需要引入我們定義的組件
import myDictdata from '@/components/Common/my-dictdata'
然后包含進(jìn)去components里面即可
export default {
components: { myDictdata },
那么原來(lái)需要直接使用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>
則可以精簡(jiǎn)為一行代碼
<my-dictdata v-model="searchForm.ProductType" type-name="商品類(lèi)型" />
而對(duì)于固定列表的，我們也可以通用的處理代碼
<my-dictdata v-model="searchForm.Status" :options="Status" />
其中Status是定義的一個(gè)對(duì)象集合
Status: [
{ Text: '正常', Value: 0 },
{ Text: '推薦', Value: 1 },
{ Text: '停用', Value: 2 }
]
是不是非常方便，而得到的效果則不變。
以上就是多個(gè)頁(yè)面內(nèi)容，通過(guò)對(duì)話框?qū)幽Ｊ秸显谝黄?，并介紹如何使用，以及對(duì)界面中常見(jiàn)的Element組件進(jìn)行介紹如何使用，以及定義一個(gè)字典列表的主定義組件，用于簡(jiǎn)化界面代碼使用
以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之常規(guī)Element界面組件的詳細(xì)內(nèi)容，更多關(guān)于Vue Element常規(guī)Element界面組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- 使用vue-element-admin框架從后端動(dòng)態(tài)獲取菜單功能的實(shí)現(xiàn)
- vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動(dòng)態(tài)渲染多級(jí)側(cè)邊欄導(dǎo)航
- vue + element ui實(shí)現(xiàn)播放器功能的實(shí)例代碼
- vue element后臺(tái)鑒權(quán)流程分析
- vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
- vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳
- 解決element DateTimePicker+vue彈出框只顯示小時(shí)
- Vue模仿ElementUI的form表單實(shí)例代碼
- vue3.0中使用element的完整步驟
- 如何封裝Vue Element的table表格組件
相關(guān)文章
這篇文章主要介紹了Vue2中配置Cesium全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue Router 實(shí)現(xiàn)動(dòng)態(tài)路由和常見(jiàn)問(wèn)題及解決方法
動(dòng)態(tài)路由不同于常見(jiàn)的靜態(tài)路由，可以根據(jù)不同的「因素」而改變站點(diǎn)路由列表。這篇文章主要介紹了Vue Router 實(shí)現(xiàn)動(dòng)態(tài)路由和常見(jiàn)問(wèn)題解決方案,需要的朋友可以參考下2020-03-03
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
傳統(tǒng)的?DOM?更新方法會(huì)在有新舊子節(jié)點(diǎn)時(shí)卸載舊節(jié)點(diǎn)并掛載新節(jié)點(diǎn),這種方法沒(méi)有考慮到節(jié)點(diǎn)的復(fù)用可能性,diff?算法通過(guò)比較新舊節(jié)點(diǎn)的差異來(lái)復(fù)用節(jié)點(diǎn),從而優(yōu)化性能,本文給大家介紹了Vue3快速diff算法的處理過(guò)程,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue 401配合Vuex防止多次彈框的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬
這篇文章主要為大家詳細(xì)介紹了Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例
這篇文章主要介紹了vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能,結(jié)合實(shí)例形式分析了vue計(jì)算屬性get及set操作頁(yè)面元素實(shí)現(xiàn)選中與全選功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作
這篇文章主要介紹了在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10