基于 vue2.0 的 element-ui 框架，使用起來還是很方便的，非常適合快速開發，但是在做自己的項目中還是會碰到這樣那樣的問題，有些問題官方文檔并不是很詳盡，以下是我在使用 element-ui 過程中一些常用的或碰到的一些問題筆記。

一、DateTimePicker 日期選擇范圍為當前時間以及當前時間之前

<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='結束日期'></el-date-picker> </div></template><script> export default {data () { return {pickerOptions: { disabledDate (time) {return time.getTime() > Date.now() }},dateRange: [] }} }</script>

還有一種情況就是，只能選取當前時間之后的時間，包括時分秒，若選擇的時間小于當前時間，就會自動的填充成當前的時分秒。這時可以配合watch監聽屬性或事件來處理。

<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='結束日期'></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 / 1000if (st < Date.now()) { this.dateRange = new Date()} }} }</script>二、DateTimePicker 日期選擇范圍數組的拆分

項目中碰到的需求：type 為 daterange 的日期選擇器所綁定的值 date 是一個數組，但是后端接收的參數開始日期和結束日期是分開的，回顯時返回的數據也是分開的

創建 arrayUtil.js 文件

// arrayUtil.js/** * @description 安全的獲取數組對應下標數據 * @param { Array } arr * @param { int } index */export const saveGet = (arr, index) => { if( arr & Array.isArray(arr)) {return arr[index]; } else {return undefined; }}

在 .vue 文件中引入并調用

// .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='結束日期' style='width: 100%;'></el-date-picker>export default { data() {return { date: [] // 日期范圍} }, // 計算得到傳遞給后端的參數(拆分日期范圍數組) computed: {queryParams() { return {... ...fromDate: saveGet(this.form.date, 0),toDate: saveGet(this.form,date, 1),... ... };} },}

回顯的時候，后端返回的 fromDate 和 toDate 再拼成數組就可以了。

三、el-select 選擇器options的value/label采用拼接的方式

<el-select placeholder='請選擇' 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，回顯時要匹配過濾下然后再拼接顯示就行了。

顯示如下：

四、el-dialog 父子組件傳值，關閉el-dialog時報錯

二次封裝 el-dialog 時，關閉 dialog 出現如下錯誤

具體代碼如下：

// 父組件<el-button type='primary' size='mini' @click='dialogVisible=true'>新 增</el-button><com-dialog :dialogVisible.sync='dialogVisible' @closeDialog='closeDialog'></com-dialog>// 子組件<template> <el-dialog :visible.sync='dialogVisible' @close='closeDialog'></template><script>export default { props: { dialogVisible: { type: Boolean, default: false } }, methods:{ //關閉Dialog closeDialog(){this.$emit(’update:closeDialog’, false); } },};</script>

出現錯誤的原因是：子組件的關閉事件和父組件的關閉事件相沖突了，子組件的 props 屬性要由父組件來控制，不能直接修改 visible 的值。此處的 sync 修飾符相當于 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 :visible.sync='dialogVisible' :before-close='closeDialog'></template><script>export default { props: { dialogVisible: { type: Boolean, default: false } }, methods:{ //關閉Dialog closeDialog(){this.$emit(’closeDialog’, false); } },};</script>五、el-form-item的label自定義

要求在 form 表單的 label 中添加提示文字，具體顯示要求如下圖：

api文檔中form-item slot有個label屬性，用來自定義標簽文本的內容。實現如下：

<el-form-item prop='name'> <span slot='label'>用戶名<i>（支持字母、數字和特殊符號）</i> </span> <el-input v-model='name'></el-input></el-form-item>

然后結合樣式修改下字體和顏色就可以了

六、el-input 使用clearable清除內容時觸發校驗提示

form表單的el-input帶有輸入校驗，觸發方式trigger為blur，如果使用clearable清除內容時不會觸發校驗提示。文檔中el-input提供了focus()方法，在清除內容的時候調用一下，在失去焦點時就會觸發校驗了。具體實現如下：

<el-input placeholder='請輸入' v-model='form.name' clearable ref='nameRef' @clear='clearInput(’nameRef’)'></el-input> // 清除表單內容事件clearInput (refName) { this.$refs[refName].focus()}

以上就是總結Vue Element UI使用中遇到的問題的詳細內容，更多關于Vue Element UI的資料請關注好吧啦網其它相關文章！