總結Vue Element UI使用中遇到的問題
基於 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 / 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-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="請選擇" 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,回顯時要匹配過濾下然後再拼接顯示就行瞭。
顯示如下:
四、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, 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的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- vue element實現表格增加刪除修改數據
- vue封裝form表單組件拒絕重復寫form表單
- el-form resetFields無效和validate無效的可能原因及解決方法
- vue在自定義組件上使用v-model和.sync的方法實例
- Vue Element前端應用開發之常規Element界面組件