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

Element-UI 2.4.11 版本 使用注意(发现一点更新一点)的更多相关文章

  1. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  2. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  3. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  4. 【vue-waring】element UI 由版本1.4.12 升级到element-ui@2.0.10

    遇到的问题:element UI   由版本1.4.12 升级到element-ui@2.0.10    cnpm run dev 运行后的waring 状态:解决(相关资料的方法对我没什么用) 解决 ...

  5. JQuery1.11版本对prop和attr接口的含义分离导致问题分析

    问题背景 实验中, 在jquery1.7版本, attr("value")  和 val() 接口获取 input 控件的值, 都是一致的, 都是当前控件值. 但是 jquery1 ...

  6. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  7. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  8. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  9. Vue + Element UI 实现权限管理系统(第三方图标库)

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

随机推荐

  1. Spring MVC源码(三) ----- @RequestBody和@ResponseBody原理解析

    概述 在SpringMVC的使用时,往往会用到@RequestBody和@ResponseBody两个注解,尤其是处理ajax请求必然要使用@ResponseBody注解.这两个注解对应着Contro ...

  2. Sending Operations to Multiple Threads_翻译

    The speed and efficiency of a long-running, data-intensive operation often improves when you split i ...

  3. android_sdcard读写(二)

    接着上篇,继续研究sdcard的神秘之处.上篇代码不变,本篇新增代码都在下面~~~ 继续上代码~~ // 写文件 File path = new File("/mnt/sdcard/sxp/ ...

  4. motion做摄像头(ZC3XX)移动物体监控系列问题

    一:插入摄像头USB没有显示 gspca: video x creat 解决:cd /dev            ls |grep video 进入/dev目录下,运行ls |grep video命 ...

  5. Vincent的城堡

    \(\mathcal{Description}\) \(\mathcal{Solution}\) 除去前k部分,后面的是随便怎么选的所以后面的就是\((n-k)^{n-k}\)种方案 前k部分,由于k ...

  6. 深入理解 JavaScript 单例模式 (Singleton Pattern)

    概念 单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在. 核心:确保只有一个实例,并提供全局访问. 实现思路 一个类能返回对象一个引用(永远是同 ...

  7. [leetcode] 650. 2 Keys Keyboard (Medium)

    解法一: 暴力DFS搜索,对每一步进行复制还是粘贴的状态进行遍历. 注意剪枝的地方: 1.当前A数量大于目标数量,停止搜索 2.当前剪贴板数字大于等于A数量时,只搜索下一步为粘贴的状态. Runtim ...

  8. RDB和AOF的区别

    redis的持久化方式RDB和AOF的区别   1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据 ...

  9. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  10. lnmp php使用命令行去备份数据库

    <?php //备份数据库we8和foshan $time = date("Y-m-d",time()); $backtime = date("Y-m-d" ...