问题:

由于iview的iselect中要我geu选择数量做个限定,但这个组件的设计本身没有一个类似于max的属性,想来也属于一个比较小众的需求。

变通解决:

选项ioption中存在一个disabled属性,且有一个selected属性。于是,我对disabled属性绑定了一个方法,这个方法将根据iselect绑定的数组长度和选项当前的选中状态进行判断,如果选项个数超过指定数目,且选项状态为未被选中,则返回为true,否则为false。代码如下:

isDisabled:function(e){
					if((this.selectedItems.length)>=5&&this.$refs[e]&&this.$refs[e][0].selected!=true)return true;
					else return false;
				},

html绑定方式如下:

<i-select v-model="selectedItems" placeholder='Select' text='Select'  value=0 size='small' filterable multiple style="width: 200px" >
  <i-option v-for="item,key in Items"  :ref='"item"+item.id' :value="item.id"  :disabled="isDisabled('item'+item.id)" :key="item.id" :label="item.name">
  </i-option>
</i-select>

结果:

当前可以满足需求,暂时能跑。

问题:在返回值判断的时候,用了三个条件,其中,中间的那个进行了一个结果测试。按说在增加了Items的个数后,refs中应该出现对应的对象,但是在实际运行中出现了一个找不到的问题,即$refs[e]返回内容为空,为什么,不得而知。由于属性绑定方法返回值的做法似乎不是vue的主流做法,控制台调试也比较费劲,因此没有继续深究。希望有人指点迷津,不胜感激。

转载于:https://my.oschina.net/rodger/blog/2961138

Logo

前往低代码交流专区

更多推荐