Vue2.0+iview踩过的坑

1,034 阅读3分钟

前言:因为第一次使用iview,匆匆看了下文档就直接上手开发,所以不免遇到一些问题,造成困惑。所以遇到问题时一定要看文档,仔细看文档,很多问题都能解决。我把目前我遇到的问题,写下来,分享一下。

1.复选框

1.1 需求:完成复选框功能,点击全选框,下面子复选框全选,取消则全不选;点击子复选框,全部点击完,全选框要选中。

image.png

一开始,在checkbox绑定:Value,通过双向绑定传到CheckboxGroup中,功能是实现了,可以一刷新页面,checkbox复选框都会默认选中,然后变回原样,通过看文档,发现CheckboxGroop绑定的属性是label,把value去掉,这种现象就消失了,盲目地把vue原生的checkbox绑定value套进去。

2. Input输入框

2.1 需求:通过两个Input输入框,限定区间范围,如果不填默认为min-max,只填一个则是min-数字或数字-max.

image.png

image.png

通过@on-change事件,把绑定的值,修改成符合的参数,再赋值到对象的属性里。可是怎么赋值都更新不了视图,后面想起我修改的是字符串,要传到对象属性里,视图是更新不了,用this.$set('对象',key,value)解决了视图更新的问题。

3.switch开关

3.1 需求:只能有一个switch为启用状态;启用新规则时,点击按钮,需弹出弹框,确认是否启用;若已存在已启用的规则,在点击确认后将原启用规则禁用,并将新规则启用。

image.png

image.png

image.png

image.png

一开始是用作用域插槽去实现这个功能,发现实现方式有点复杂,第一个原因,switch要双向绑定数据,模板的数据源都一样,造成switch同步;第二个原因,初始化时文字也不会显示出来。 就改成render函数渲染模板,一开始初始化时,switch也是不会显示出来,在value中我传的是值而switch需要的是true/false;困扰我最久的问题是,我想做成点击switch时,弹框取消时,switch状态不会改变,虽然调用了原表格接口方法,可还是一样的效果;看到文档有beforechange事件,返回的是promise,最后结合百度解决这个问题;在props中定义beforechange方法,可以beforechange是实现不了传参的,那怎么办?render还有一个事件,nativeOn,它原生方法,不能用于组件中,通过里面的mousedown事件,可以获取模板的参数,发送请求。

4. 用import导入模块方法,里面的this指向的这个模块,而不是vue,所以通过传递this参数解决this的指向问题。

总结:目前项目暂时遇到了这些问题,可能比较简单,可是对于当时的我还是造成了一些困难,总结起来,避免以后还发生这些问题,提高开发效率。