欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

總結(jié)Vue Element UI使用中遇到的問題

 更新時(shí)間:2021年05月12日 08:56:33   作者:sugar_coffee  
這篇文章主要介紹了Vue Element UI使用中遇到的問題,對ElementUI感興趣的同學(xué),可以參考下

基于 vue2.0 的 element-ui 框架,使用起來還是很方便的,非常適合快速開發(fā),但是在做自己的項(xiàng)目中還是會(huì)碰到這樣那樣的問題,有些問題官方文檔并不是很詳盡,以下是我在使用 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í)間,就會(huì)自動(dòng)的填充成當(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ù)字和特殊符號(hào))</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í)不會(huì)觸發(fā)校驗(yàn)提示。文檔中el-input提供了focus()方法,在清除內(nèi)容的時(shí)候調(diào)用一下,在失去焦點(diǎn)時(shí)就會(huì)觸發(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實(shí)現(xiàn)聊天框發(fā)送表情

    vue實(shí)現(xiàn)聊天框發(fā)送表情

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聊天框發(fā)送表情,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue $router和$route的區(qū)別詳解

    vue $router和$route的區(qū)別詳解

    這篇文章主要介紹了vue $router和$route的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 使用vue3.2實(shí)現(xiàn)多頁簽導(dǎo)航

    使用vue3.2實(shí)現(xiàn)多頁簽導(dǎo)航

    這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下
    2023-12-12
  • Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能

    Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能

    這篇文章主要介紹了Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-08-08
  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue基于electron構(gòu)建第一個(gè)程序

    vue基于electron構(gòu)建第一個(gè)程序

    這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個(gè)程序過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • Vue中使用Openlayer實(shí)現(xiàn)加載動(dòng)畫效果

    Vue中使用Openlayer實(shí)現(xiàn)加載動(dòng)畫效果

    這篇文章主要介紹了Vue+Openlayer加載動(dòng)畫效果的實(shí)現(xiàn)代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-08-08
  • Vue中jsx不完全應(yīng)用指南小結(jié)

    Vue中jsx不完全應(yīng)用指南小結(jié)

    這篇文章主要介紹了Vue中jsx不完全應(yīng)用指南小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • vue3表單參數(shù)校驗(yàn)及正則表達(dá)式舉例詳解

    vue3表單參數(shù)校驗(yàn)及正則表達(dá)式舉例詳解

    最近項(xiàng)目中有一個(gè)校驗(yàn)身份證號(hào)手機(jī)號(hào)的業(yè)務(wù),索性給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3表單參數(shù)校驗(yàn)及正則表達(dá)式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04

最新評論