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

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

<template>
    <div>
        <el-date程式設計客棧-picker
            size="small"
            clearable
            :picker-options="pickerOptions"
            v-model="dateRange"
            type="daterange"
            value-www.cppcns.com
 
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 / 1000
                if (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-phttp://www.cppcns.comicker>

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="請選擇" style="width:100%" filterable v-model="info" clearable >
    <el-option
      v-for="item in infoList"
      :key="info.id"
      :label="`nhttp://www.cppcns.comame: ${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 title="新增" :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 title="新增" :visible.sync="dialogVisible" :before-close="closeDialog">
</template>

<script>
export default {
  props: {
      dialogVisible: {
          type: Boolean,methods:{
      //關閉Dialog
      closeDialog(){
        this.$emit('closeDialog',};
</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的資料請關注我們其它相關文章！