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>

原文链接:https://www.cnblogs.com/itstac/p/11090022.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有