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;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;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