Element-UI 2.4.11 版本 使用注意(發現一點更新一點)

1.$Vue.$refs.addForm.resetFields() 的resetFields()方法重置到默認值並不是 ,你在form綁定對象上寫的默認值 ,而是這個form被渲染出來之后第一次賦到對象上的值  !!

2.組件屬性命名使用駝峰型式 ,但在組件上設置值時要用 - 把每個單詞分開 如下面的屬性,設置屬性值 為:<el-grid   v-bind:auto-load="false" >

props: {
//gird加載完是否默認加載數據
autoLoad: {
type: Boolean,
default: true
}
}

3. 當使用table的展開功能時,如果展開的內容是動態加載的,不要把該內容放到行內對象中,否則賦值時會把行重新渲染,導致加載時看上去展不開的樣子(如果展開時第一次展不開后面正常 可以考慮看是不是這個問題)如下圖

 

4. 使用tabs時 如果子選項卡有按條件顯示,前面的要用v-show來隱藏不能是v-if 否則 會提示key重復. 也可以手動設置name 屬性來解決key重復的問題. 需要動態設置當前選中選項卡可以給它綁定value屬性(v-model 不能動態綁定)

5.當table的列有動態操作時:

   如下代碼: 

<el-table-column
:label="showFirst ? 'index/選擇' : ''"
:type="!showFirst ? 'index' : ''"
fixed="left" 
width="120" >
<template v-if="showFirst" slot-scope="scope">
<label style="display:inline-block;width:25px;text-align:right">{{scope.$index+1}}</label>
&nbsp;&nbsp;/&nbsp;&nbsp;
<label>
<input type="checkbox" v-bind:value="scope.$index" class="check_mark" style="vertical-align:middle;" />
</label>
</template>
</el-table-column>

在這里使用插槽替換了當 showFirst=true時的內容. 但由於使用了 slot-scope 所以當type 切回 index時並不會生成索引,因為slot-scope會完全占用內容,不會因為v-if而去掉,  這時候只需要使用vue 2.6中的 v-slot 指令即可.如下

<el-table-column
:label="showFirst ? 'index/選擇' : ''"
:type="!showFirst ? 'index' : ''"
fixed="left" 
width="120" >
<template v-if="showFirst" v-slot="scope">
<label style="display:inline-block;width:25px;text-align:right">{{scope.$index+1}}</label>
&nbsp;&nbsp;/&nbsp;&nbsp;
<label>
<input type="checkbox" v-bind:value="scope.$index" class="check_mark" style="vertical-align:middle;" />
</label>
</template>
</el-table-column>

 

6. 在使用 el-select 時會發現直接用js給select的Model屬性賦值后不能觸發他的 change事件. 現有以下方案來處理,主要是紅色這一塊代碼. 以下示例是檢查一個table中所有的select 然后讓它觸發事件,如果你直接 給select綁上ref也可以取出來直接調用

emitChange(); 大家不防試一下看看.

  

 var ch= vueObj.$refs.mainTable.$children;
                ch=ch[ch.length-1];
                var c;
                this.$nextTick(function(){
                    for (var i = 0; i < ch.$children.length; i++) {
                        c=ch.$children[i];
                        if (c.$vnode.tag.endsWith("ElSelect")) {
                            c.emitChange();
                        }
                    }
                });

 7. 當在form表單里的控件上寫回車事件時,不想觸發form的submit則可以在form上添加  @@submit.native.prevent