CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentiview
Hkm Sadek
Hkm Sadek

Reputation: 3209

How to add limit to iview ui multiple select?

I am trying to add limit to iView ui Multiple select. Here is the code 

<Select
     v-model="data.category"
     :multiple="true"
     filterable
     remote
     :remote-method="remoteMethod2"
     :loading="loading2">
     <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select>

I want to add something like this max="3" to limit the selected items

Couldn't find anything in api doc.

Upvotes: 2

Views: 907

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

There's no property with that functionality, but we could do it ourselves by watching the length of our model that contains the selected items and if it's equal to the fixed max in data object properties we change the disabled property state to true and if remove an item from the selected ones we could also enable the options drop down, check th following example that explains itself : 

var Main = {
  data() {
    return {
    disable:false,
      max: 2,
      cityList: [{
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model10: []
    }
  },
  watch: {
    model10(val) {
      if (val.length == this.max) this.disable=true
      else this.disable=false
    },
   
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <i-select v-model="model10" multiple style="width:260px">
    <i-option :disabled="disable" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
  </i-select>
</div>

Upvotes: 1

Related Questions