element-Ui 問題記錄(個人筆記)

在我們使用element進(jìn)行開發(fā)的時候，有時會出現(xiàn)一些奇怪的問題，這些問題有可能是框架本身的缺陷，也有可能是我們使用不當(dāng)，遂將在開發(fā)過程中遇到的問題和值得記錄下來的東西，做一個集合，方便以后參考。

el-time-picker組件無法選中時間

 <el-time-picker is-range 
    style="width:500px" <!--必須設(shè)置寬度，不然會導(dǎo)致刷新或初始化的時候撐不開這個組件-->
    :disabled="isDisabled"
    v-model="form.time" 
    range-separator="至" start-placeholder="開始時間"
    end-placeholder="結(jié)束時間" 
    placeholder="選擇時間范圍"
    value-format="HH:mm" format="HH:mm">
</el-time-picker>

解決方法：必須設(shè)置默認(rèn)的時間，不然無法進(jìn)行時間的選擇，組件里顯示的為空數(shù)據(jù)

data(){
    return {
        form:{
            time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
        }
    }
}

el-time-picker組件位置定位錯亂(出現(xiàn)在左上角)

image.png

解決方法：給每一個時間選擇器添加一個key屬性即可。

封裝dialog彈框組件

在子組件直接點擊關(guān)閉時會導(dǎo)致報錯(單向數(shù)據(jù)流問題)。解決方法就是在父組件操作關(guān)閉事件，并用第三個變量來控制顯示與隱藏。并在visible后加.sync。

<template>
<div class="dialog">
    <el-dialog 
      :title="title" 
      :visible.sync="visible" 
      @close="$emit('update:show', false)" 
      :show="show">
      <slot></slot>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            visible: this.show
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        }
    },
    watch: {
        show() {
            this.visible = this.show; // 用另外一個變量給visible賦值
        }
    }
}
</script>

<style>

</style>

<dialog-pop title="導(dǎo)出學(xué)習(xí)報告設(shè)置" :show.sync="dialogTableVisible">
</dialog-pop>
// 在父組件操作dialogTableVisible

el-form表單校驗不消失問題

ElementUI Form表單驗證不通過，明明有值, 驗證的錯誤信息不消失。

解決方法：表單域的item項的prop與組件的綁定值v-model的值要一樣，比如 prop="a" 那么v-model的值也要等于"a"

<el-form-item label="詳情" prop="detail">
   <el-input v-model="form.detail"></el-input>
</el-form-item>

el-date-picker多個選擇器時選擇時間錯亂

 <el-time-picker v-if="ech1==1" key="startHour1" is-range v-model="time_value1" range-separator="至" start-placeholder="開始時間" end-placeholder="結(jié)束時間" placeholder="選擇時間范圍" value-format="timestamp">
</el-time-picker>
<el-date-picker v-if=" ech1==2" key="startDate1" v-model="date_value1" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" value-format="timestamp">
</el-date-picker>
<el-date-picker v-if="ech1==3" key="startWeek1" v-model="time1[0]" type="week" format="yyyy 第 WW 周" placeholder="選擇周">

</el-date-picker>
<el-date-picker style="margin-left:5px" key="endWeek1" v-if="ech1==3" v-model="time1[1]" type="week" format="yyyy 第 WW 周" placeholder="選擇周">

</el-date-picker>
<el-date-picker v-if="ech1==4" key="startMonth1" v-model="month_value1" type="monthrange" range-separator="至" start-placeholder="開始月份" end-placeholder="結(jié)束月份" value-format="timestamp">
</el-date-picker>

<el-date-picker v-if="ech1==5" key="startYear1" v-model="year_value1[0]" type="year" value-format="timestamp" placeholder="選擇年">
</el-date-picker>
<el-date-picker style="margin-left:5px;" key="endYear1" v-if="ech1==5" v-model="year_value1[1]" type="year" value-format="timestamp" placeholder="結(jié)束年">
</el-date-picker>

注意的點：

  1. 每個選擇器綁定的值最好要分開，不要相互影響。如:time_value1，date_value1......
  2. 當(dāng)type為week的時候，用value-format="timestamp"會報錯，如果需要使用時間戳格式的話，可以自己使用Date.parse()或moment.js來進(jìn)行處理。
  3. 綁定的值該是數(shù)組就寫數(shù)組，該是字符串就寫字符串，不要隨便賦值。

el-cascader后臺返回數(shù)據(jù)與本地字段不一樣

用props屬性來配置成和后臺數(shù)據(jù)一樣的字段。

<el-cascader 
    v-model="catalogueOptions" 
    :options="cateOptions" 
    :props="props" 
    value="id" 
    label="title" 
    @change="handleCatalogueChange"
></el-cascader>

data(){
    return {
        props: { value: "id", label: "title", children: "pid" },
    }
}

el-cascader無法回顯數(shù)據(jù)？

1、檢查是否賦值成功；
2、賦值成功后檢查拿到的數(shù)據(jù)是否與下拉列表數(shù)據(jù)id相匹配（可能后端先隨便寫的）

el-select為多選時數(shù)據(jù)反顯不顯示文字

<el-select 
    v-model="form.assistant" 
    multiple 
    placeholder="請選擇" 
    value-key="id" 
    @change="handleAssistantChange"
>
     <el-option 
        v-for="item in form.assistOptions" 
       :key="item.id" 
       :label="item.realname" 
       :value="item.id">
     </el-option>
</el-select>
image.png

注意：1.v-model綁定的值格式為[12,23,34]這種格式，如果不是需要進(jìn)行處理。2.檢查返回id數(shù)組與下拉框列表中的數(shù)據(jù)是否有匹配，如果不匹配則顯示不了文字。

[Vue warn]: <transition-group> children must be keyed: <ElTag>報錯

image.png

在保證綁定的數(shù)據(jù)類型與后臺數(shù)據(jù)類型一致的情況下，還出現(xiàn)以上報錯，可能有以下原因：

  1. value-key沒有設(shè)置；
  2. value-key不是唯一性；
  3. value-key綁定的值不是el-option循環(huán)中每一項item對象的屬性名。

el-tree樹形控件獲取包括半選狀態(tài)的節(jié)點

勾選時默認(rèn)獲取到的節(jié)點是不包括半選狀態(tài)的，所以我們前端傳過去之后往往返回的也不包括半選狀態(tài)的，所以反顯的時候不正確。處理方法如下：

image.png
<el-tree ref="tree" 
   :data="treeData" 
   show-checkbox 
   node-key="id"
   :default-checked-keys="addRo.authorization" 
   :props="defaultProps">
</el-tree>

//確定添加
handleAddAuthorization(formName) {
    this.$refs[formName].validate(valid => {
       if (valid) {
           // 通過node獲取選中的樹節(jié)點，包括半選狀態(tài)的
           let authorization = this.$refs['tree'].getCheckedNodes(false, true).map(i => i.id)
       ｝
    ｝
｝

el-tree點擊編輯反顯時父節(jié)點下的子節(jié)點全部選中(本應(yīng)只選中一部分)

解決方案：

<el-tree
    ref="tree"
    :check-strictly="checkStrictly"
    :data="routesData"
    show-checkbox
    node-key="path"
    class="permission-tree"
/>

data() {
    checkStrictly: false,
    routesData: []
}

1.設(shè)置check-strictly
checkStrictly是一個變量,默認(rèn)值是false
2.拿到接口數(shù)據(jù)后：

handleGetTreeData() {
     this.$http(params).then(res => {
         this.checkStrictly = true  //重點：給數(shù)節(jié)點賦值之前 先設(shè)置為true
         this.$nextTick(() => {
             const routes = res.data
             this.$refs.tree.setCheckedNodes(routes) //給樹節(jié)點賦值
             this.checkStrictly = false //重點： 賦值完成后 設(shè)置為false
         })
      }) 
}

el-table添加單選按鈕

image.png
<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%">
    <el-table-column label="選擇" width="65">
     <template scope="scope">
      <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
    </template>
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
</template>

data() {
    return {
       radio: ''
    }
},
 methods: {
  getCurrentRow(row){ 
    //獲取選中數(shù)據(jù)this.templateSelection = row;
    },
  }

去除單選按鈕里的數(shù)字，只需添加空格標(biāo)簽&nbsp;就行了。

<el-radio 
  :label="scope.$index" 
  v-model="radio" 
  @change.native="getCurrentRow(scope.row)"
>
{{&nbsp;}}
</el-radio>

el-form的label-width設(shè)置為"auto"時報錯

image.png

解決方法：設(shè)置為具體的數(shù)值或百分比。( 注：每一個el-form-item可以設(shè)置單獨的label-wodth。)

組件事件傳第二個自定義參數(shù)

我們直接綁定一個事件的時候，事件默認(rèn)有一個參數(shù)，但是我們想傳第二個參數(shù)的時候，需要怎么傳，以下就是解決方法：

<el-time-picker
    is-range
    v-model="time_value1" 
    key="hour" 
    range-separator="至" 
    start-placeholder="開始時間" 
    end-placeholder="結(jié)束時間" 
    placeholder="選擇時間范圍" 
    value-format="timestamp" 
    @change="((val)=>{handleTimeSelect(val,'hour')})"
>
</el-time-picker>

el-form常用的表單正則驗證【用戶名、密碼、身份證號、郵箱號，手機(jī)號，車牌號、ip地址等】

https://blog.csdn.net/weixin_43970743/article/details/88532307

el-radio-group 接口數(shù)據(jù)賦值后點擊沒反應(yīng)

如果 v-model 是二級字段，而js中又設(shè)置了默認(rèn)選擇項，則點擊無反應(yīng)。
解決辦法：
v-model綁定的值改成一級對象。

el-input框接口數(shù)據(jù)賦值后無法編輯內(nèi)容問題

請求接口數(shù)據(jù)賦值后，頁面上input框正常顯示，值也是對的，但是不可編輯。
解決辦法：
使用vue的全局api方法，this.$set(data, property, value)

Vue解決echart在element的tab切換時顯示不正確或?qū)挾茸赃m應(yīng)問題：

原因：在頁面進(jìn)行加載時，隱藏的圖表找不到對應(yīng)的div大小，所以默認(rèn)給了一個大小。所以要做的就是在頁面加載時，就對圖表進(jìn)行初始化
解決方法：利用v-if屬性,當(dāng)切換至對應(yīng)的tab時，設(shè)置其v-if的值為true即可，同時設(shè)置默認(rèn)顯示的tab

el-date-picker獲取日，周，月第一天和最后一天

<el-date-picker v-if="inputForm.type==1" class="fl" v-model="date" type="date" placeholder="選擇日期" value-format="timestamp" @change="handleDateChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==2" v-model="week" type="week" format="yyyy 第 WW 周" placeholder="選擇周" value-format="yyyy-MM-dd" :picker-options="{firstDayOfWeek:1}" @change="handleWeekChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==3" v-model="month" type="month" placeholder="選擇月" value-format="timestamp" @change="handleMonthChange">
</el-date-picker>
        handleDateChange(e) { // 獲取本日最早一小時和最后一小時時間戳
            let start = e/1000
            let end = start + 24*60*60-1
            console.log("start", start);
            console.log("end",end);
        },
        handleWeekChange(e) { // 獲取本周最早一天和最后一天時間戳
            // 周選擇器獲取的默認(rèn)是當(dāng)前軸第二天的時間
            let start = moment(e).unix()-24*60*60
            let end = moment(e).unix()+24*60*60*6-1 // 23:59:59
            console.log("start", start);
            console.log("end", end);
        },
        handleMonthChange(value) { // 獲取本月最早一天和最后一天時間戳
            let date = new Date(value);
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 在前面補0
            let year = date.getFullYear();
            let startTime = year + '' + month + '01';
            let day = new Date(year, month, 0); // 第三個參數(shù)日為0可以獲得本月最后一天
            let endTime = year + '' + month + '' + day.getDate();
            console.log(moment(startTime).unix(), 'startTime');
            console.log(moment(endTime).unix(), 'endTime ');
        }

el-input 只能輸入正整數(shù)完美解決不閃動

<el-input
    :value="text"
    @input="e => (text = isnumber(e))"
    style="width: 66px"
    :disabled="isEdit"
></el-input>

    isnumber(val) {
      val = val.replace(/[^0-9]/gi, "");
      // 此處還可以限制位數(shù)以及大小
      return val;
    },

el-table序號自定義

image.png
image.png
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
  </el-table>

 methods: {
      indexMethod(index) {
        return index * 2;
      }
 }

解決表格編輯彈窗改變其中一項，表格數(shù)據(jù)實時變動問題

在每次彈出對話框的時候深拷貝一次當(dāng)前行數(shù)據(jù)的副本

this.form = JSON.parse(JSON.stringify(row))

el-form只校驗表單其中一個字段

在一些用戶注冊場景中，提交整個表單前有時候我們會做一些單獨字段的校驗，例如發(fā)送手機(jī)驗證碼，發(fā)送時我們只需要校驗手機(jī)號碼這個字段，可以這樣做：

this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // 發(fā)送驗證碼
  }
})

如果需要多個參數(shù)，將參數(shù)改為數(shù)組形式即可。

el-table表頭與內(nèi)容錯位

全局設(shè)置

.el-table--scrollable-y .el-table__body-wrapper {
     overflow-y: overlay !important;
}

......

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容