vue插件ele使用小坑
1.ele-table组件中selection如何默认选中
使用官网提供的api-->>Table Methods中的toggleRowSelection,关于这个api基本介绍就不说了。
在vue中使用方式:建议在computed中使用,监听table(ref="table",:data="data")中绑定的数据data变化情况,通过相关条件判定table中的row是否被勾选,代码如下:
computed:{
listenData(){
for(var item of this.data){
if(判断条件)this.$refs.table.toggleRowSelection(item,true)
}
return this.data
}
}
上述代码,符合判断条件的默认勾选,下载computed中可以异步请求数据
2.同页面中多个 el-select 的 change 事件的互相影响
change事件监听的的该 el-select 值的变化。若select存在,则会一直监听。
修改前:
<el-select v-if="showSelect" :key="indexb" v-model="item.status" @change="change" :class="'color'+item.status">
<el-option
v-for="(item,index) in statusA"
:key="index"
:label="item.label"
:value="item.val">
</el-option>
</el-select>
出现时机:showSelect:true, statusA改变,会触发change事件
解决方案:
1.由于select的监听机制,可以先showSelect=false;showSelect=true;会导致重绘,不推荐
2.change事件仍然可以执行,但对执行时机进行筛选,推荐筛选时机为@visible-change 为 true 和 false
<el-select v-show="showSelect" :key="indexb" v-model="item.status" @change="change" @visible-change="canChange" :class="'color'+item.status">
<el-option
v-for="(item,index) in statusA"
:key="index"
:label="item.label"
:value="item.val">
</el-option>
</el-select>
3.单页面使用table时,由于需要固定头部,并且需要table的height需要响应屏高
出现时机:页面使用弹性布局,动态获取并且设置table的height
问题:在使用动态组件(组件中多次调用需要响应的table)的时候,table适配的只有第一个动态组件中的;
解决方案:
1.由于使用的弹性布局,计算对应的元素的height时,使用上级元素。
4.table组件中对列使用fixed="left | right",固定列高度不对的情形
出现几率:随机。
出现时机:由于现有的table组件样式不符合业务场景的要求,在对table进行全局修改之后。
临时应对方案:
1.增加行高
2.缩小字体
5.table组件内容出现滚动条,导致列对不齐
出现几率:使用小米笔记本测试时
解决方案:table组件加上 max-height 或者 height。
6.使用ele提供cascader级联选择器时出现无限render
多次测试是由于设置props导致,使用默认值就可以了
vue插件ele使用小坑的更多相关文章
- vue 项目实战之小坑坑
1. Vue 多个元素动画 ,需要使用 transition-group 标签,并且需要赋值 唯一 key 值. 2. 用ajax 获取到数据赋值给data 后 ,再手动向data里添加的属性无效. ...
- 移动端300ms延迟解决方法在vue 里面的一些小坑
话不多说上图: 至于import为什么会报错,瞅下面这个图: 总结:要搞懂个必须了解下es6的解构赋值才能在这方面装逼,网上资料一大堆自行百度.
- Vue遇到的一些小坑
1.在使用v-html指令时,发现添加的元素不能设置样式 解决方案:在添加样式时使用>>>就可以添加成功 例如:<div v-html="<img src=&q ...
- vue关于keep-alive的小坑
在移动端里 少不了底部导航 在做底部导航的时候点击都会重复请求 我就使用了keep-alive来缓存 每次点击的时候走缓存 这里还有个用途就是当有列表的时候点进详情在返回可以保存之前的滚动记录 不会刷 ...
- vue移动端flexible.js结合Muse-ui使用和vux的小坑
因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- 像VUE一样写微信小程序-深入研究wepy框架
像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...
- target-densitydpi=device-dpi会使其他ui插件布局变小
target-densitydpi=device-dpi会使其他ui插件布局变小 东哥说:不用rem了,把meta改成这样<meta name="viewport" cont ...
随机推荐
- 实习番外篇:解决C语言使用Makefile无法实现更好的持续集成问题
工作中遇见的一个问题,提供项目源代码的情况下,希望对项目进行持续集成,达到一个C项目增量编译的效果.原本第一天是想通过模拟Makefile执行步骤来实现整个过程的,但是事实上发现整个Makefile显 ...
- java经典40+分析
现在是3月份,也是每年开年企业公司招聘的高峰期,同时有许多的朋友也出来找工作.现在的招聘他们有时会给你出一套面试题或者智力测试题,也有的直接让你上机操作,写一段程序.算法的计算不乏出现,基于这个原 ...
- DOM3级的变化
由于存在跨浏览器开发问题所以不推荐使用: 兼容性: event.key 包含所按下键的字符 event.char 属性IE9和safari和chrome并不支持 event.location 返回所按 ...
- adb push init.rc /
http://blog.csdn.net/jumper511/article/details/28856249 修改Android init.rc文件后,需要将修改后的文件上传到手机,但是发下如下问题 ...
- i2c_client 几种实例化方法
http://blog.csdn.net/lugandong/article/details/48092397
- shell常用符号的意义
转自:http://blog.sina.com.cn/mo0928 感谢原作者!!! 跟網路農夫了解UNIX SHELL-(Bash scripting 简介 第四章 特殊符号) (2007-08-1 ...
- fPLL结构及动态配置
输入参考时钟 从上图可以看到参考时钟输入的几种类型. 注意:fPLL的校正是由CLKUSR来驱动的,这个时钟必须要保持稳定. 参考时钟利用器 N计数器 N计数器会把参考时钟利用器输出进行分 ...
- DDR4 PSOD输出的优点--DBI的优点
DDR4是JEDEC组织关于DRAM器件的下一代标准.DDR4主要是针对需要高带宽低功耗的场合.这些需求导致了DDR4芯片引入了一些新的特点,这些新的特点,导致在系统设计中,引入一些新的设计需求. D ...
- WordPaster-KesionCMS V9整合教程
注意:KesionCMS V9使用的是JQuery 1.10.3版本.需要到JQuery UI官网下载JQuery 1.10.3的UI库. JQueryUI官网:http://jqueryui.com ...
- 批处理FINDSTR正则表达式用法实例分析
1.findstr . 2.txt 或 Findstr "." 2.txt 从文件2.txt中查找任意字符,不包括空字符或空行 2.findstr .* 2.txt 或 finds ...