Как добавить ограничение на множественный выбор iview ui? - PullRequest
Новая
       33

Как добавить ограничение на множественный выбор iview ui?

0 голосов
/ 19 октября 2018

Я пытаюсь добавить ограничение на iView ui Multiple select.Вот код 

<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>

Я хочу добавить что-то вроде этого max="3", чтобы ограничить выбранные элементы

Не удалось найти что-либо в api doc.

1 Ответ

0 голосов
/ 20 октября 2018

Нет свойства с этой функциональностью, но мы могли бы сделать это сами, наблюдая за длиной нашего model, содержащего выбранные элементы, и, если оно равно фиксированному max в свойствах объекта данных, мы изменяем disabledсостояние свойства true, и если удалить элемент из выбранных, мы также можем включить раскрывающиеся опции, проверьте следующий пример, который объясняет себя: 

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>
...