總結(jié)Vue Element UI使用中遇到的問題
基于 vue2.0 的 element-ui 框架，使用起來還是很方便的，非常適合快速開發(fā)，但是在做自己的項(xiàng)目中還是會碰到這樣那樣的問題，有些問題官方文檔并不是很詳盡，以下是我在使用 element-ui 過程中一些常用的或碰到的一些問題筆記。
一、DateTimePicker 日期選擇范圍為當(dāng)前時(shí)間以及當(dāng)前時(shí)間之前
<template>
<div>
<el-date-picker
size="small"
clearable
:picker-options="pickerOptions"
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"></el-date-picker>
</div>
</template>
<script>
export default {
data () {
return {
pickerOptions: {
disabledDate (time) {
return time.getTime() > Date.now()
}
},
dateRange: []
}
}
}
</script>
還有一種情況就是，只能選取當(dāng)前時(shí)間之后的時(shí)間，包括時(shí)分秒，若選擇的時(shí)間小于當(dāng)前時(shí)間，就會自動的填充成當(dāng)前的時(shí)分秒。這時(shí)可以配合watch監(jiān)聽屬性或事件來處理。
<template>
<div>
<el-date-picker size="small" clearable type="daterange" v-model="dateRange"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"></el-date-picker>
</div>
</template>
<script>
export default {
data () {
return {
pickerOptions: {
disabledDate (time) {
return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
}
},
dateRange: []
}
},
watch: {
dateRange (val) { //此處也可以替換成change事件
var st = new Date(val) * 1000 / 1000
if (st < Date.now()) {
this.dateRange = new Date()
}
}
}
}
</script>
二、DateTimePicker 日期選擇范圍數(shù)組的拆分
項(xiàng)目中碰到的需求：type 為 daterange 的日期選擇器所綁定的值 date 是一個(gè)數(shù)組，但是后端接收的參數(shù)開始日期和結(jié)束日期是分開的，回顯時(shí)返回的數(shù)據(jù)也是分開的
創(chuàng)建 arrayUtil.js 文件
// arrayUtil.js
/**
* @description 安全的獲取數(shù)組對應(yīng)下標(biāo)數(shù)據(jù)
* @param { Array } arr
* @param { int } index
*/
export const saveGet = (arr, index) => {
if( arr & Array.isArray(arr)) {
return arr[index];
} else {
return undefined;
}
}
在 .vue 文件中引入并調(diào)用
// .vue 文件
import { saveGet } from './utils/arrayUtil';
<el-date-picker
type="daterange"
v-model="date"
value-format="yyyy-mm-dd"
format="yyyy-mm-dd"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
style="width: 100%;"></el-date-picker>
export default {
data() {
return {
date: [] // 日期范圍
}
},
// 計(jì)算得到傳遞給后端的參數(shù)(拆分日期范圍數(shù)組)
computed: {
queryParams() {
return {
... ...
fromDate: saveGet(this.form.date, 0),
toDate: saveGet(this.form,date, 1),
... ...
};
}
},
}
回顯的時(shí)候，后端返回的 fromDate 和 toDate 再拼成數(shù)組就可以了。
三、el-select 選擇器options的value/label采用拼接的方式
<el-select placeholder="請選擇" style="width:100%" filterable v-model="info" clearable >
<el-option
v-for="item in infoList"
:key="info.id"
:label="`name: ${item.name} - idNo: ${item.idNo}`"
:value="item.id">
<span style="float: left">{{ item.tableName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.level }}</span>
</el-option>
</el-select>
上述 v-model="info" 是從后端返回的選擇用戶 id，infoList 為所有用戶的信息，label 拼接了 用戶姓名 - 用戶idNo，回顯時(shí)要匹配過濾下然后再拼接顯示就行了。
顯示如下：
四、el-dialog 父子組件傳值，關(guān)閉el-dialog時(shí)報(bào)錯(cuò)
二次封裝 el-dialog 時(shí)，關(guān)閉 dialog 出現(xiàn)如下錯(cuò)誤
具體代碼如下：
// 父組件
<el-button type="primary" size="mini" @click="dialogVisible=true">新 增</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>
// 子組件
<template>
<el-dialog title="新增" :visible.sync="dialogVisible" @close="closeDialog">
</template>
<script>
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
methods:{
//關(guān)閉Dialog
closeDialog(){
this.$emit('update:closeDialog', false);
}
},
};
</script>
出現(xiàn)錯(cuò)誤的原因是：子組件的關(guān)閉事件和父組件的關(guān)閉事件相沖突了，子組件的 props 屬性要由父組件來控制，不能直接修改 visible 的值。此處的 sync 修飾符相當(dāng)于 el-dialog 直接修改了父組件的值。所以把父組件和子組件的 .sync 去掉就可以了。
還有一種方法就是將 close 方法改成 before-close，具體代碼如下：
// 父組件
<el-button type="primary" size="mini" @click="dialogVisible=true">新 增</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>
// 子組件
<template>
<el-dialog title="新增" :visible.sync="dialogVisible" :before-close="closeDialog">
</template>
<script>
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
methods:{
//關(guān)閉Dialog
closeDialog(){
this.$emit('closeDialog', false);
}
},
};
</script>
五、el-form-item的label自定義
要求在 form 表單的 label 中添加提示文字，具體顯示要求如下圖：
api文檔中form-item slot有個(gè)label屬性，用來自定義標(biāo)簽文本的內(nèi)容。實(shí)現(xiàn)如下：
<el-form-item prop="name">
<span slot="label">
用戶名<i>（支持字母、數(shù)字和特殊符號）</i>
</span>
<el-input v-model="name"></el-input>
</el-form-item>
然后結(jié)合樣式修改下字體和顏色就可以了
六、el-input 使用clearable清除內(nèi)容時(shí)觸發(fā)校驗(yàn)提示
form表單的el-input帶有輸入校驗(yàn)，觸發(fā)方式trigger為blur，如果使用clearable清除內(nèi)容時(shí)不會觸發(fā)校驗(yàn)提示。文檔中el-input提供了focus()方法，在清除內(nèi)容的時(shí)候調(diào)用一下，在失去焦點(diǎn)時(shí)就會觸發(fā)校驗(yàn)了。具體實(shí)現(xiàn)如下：
<el-input placeholder="請輸入" v-model="form.name" clearable ref="nameRef" @clear="clearInput('nameRef')"></el-input>
// 清除表單內(nèi)容事件
clearInput (refName) {
this.$refs[refName].focus()
}
以上就是總結(jié)Vue Element UI使用中遇到的問題的詳細(xì)內(nèi)容，更多關(guān)于Vue Element UI的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中如何下載excel流文件及設(shè)置下載文件名，對vue感興趣的同學(xué)，可以參考下2021-05-05
Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue單頁面應(yīng)用做預(yù)渲染的方法實(shí)例
vue是一個(gè)單頁面的應(yīng)用,這導(dǎo)致一些爬蟲和百度無法搜索到,如果你想針對你應(yīng)用的其中某些頁面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下2021-10-10
本篇文章主要介紹了了解VUE的render函數(shù)的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue keep-alive請求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請求數(shù)據(jù)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會包含在http請求中，并且不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合2022-09-09
使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動端和pc端)
這篇文章主要介紹了使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動端和pc端)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12